/* CSS Variables for Panel Colors */
:root {
    --primary-color: #8b5cf6;
    --primary-color-rgb: 139, 92, 246;
    --secondary-color: #8b5cf6;
    --secondary-color-rgb: 139, 92, 246;
    --border-color: rgba(255, 255, 255, .1);
    --border-color-2: rgba(255, 255, 255, .2);
    
    /* Custom Panel Colors */
    --panel-primary: #8b5cf6;
    --panel-primary-hover: #7c3aed;
    --panel-bg: #0a0e1a;
    --panel-surface: #141824;
    --panel-surface-2: #1a1f2e;
    --panel-border: rgba(139, 92, 246, 0.2);
    --panel-text: #ffffff;
    --panel-text-subtle: #94a3b8;
}

/* Pricing Tabs */
.pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.pricing-tab {
    padding: 15px 35px;
    background: var(--panel-surface);
    border: 2px solid var(--panel-border);
    border-radius: 12px;
    color: var(--panel-text-subtle);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pricing-tab:hover {
    border-color: var(--panel-primary);
    color: var(--panel-text);
    transform: translateY(-2px);
}

.pricing-tab.active {
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-primary-hover));
    border-color: var(--panel-primary);
    color: #ffffff;
}

.pricing-content {
    display: none;
}

.pricing-content.active {
    display: block;
}

/* Tier Badges */
.tier-badge {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
}

.tier-badge.eco {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));
    color: #22c55e;
    border: 2px solid rgba(34, 197, 94, 0.3);
}

.tier-badge.budget {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    color: #3b82f6;
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.tier-badge.premium {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05));
    color: var(--panel-primary);
    border: 2px solid var(--panel-border);
}

/* Pricing Cards */
.pricing-card-new {
    background: var(--panel-surface);
    border: 2px solid var(--panel-border);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pricing-card-new:hover {
    transform: translateY(-10px);
    border-color: var(--panel-primary);
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.3);
}

.pricing-card-new .plan-name {
    font-size: 24px;
    font-weight: 800;
    color: var(--panel-text);
    margin-bottom: 20px;
    text-align: center;
}

.pricing-card-new .plan-price {
    font-size: 48px;
    font-weight: 900;
    color: var(--panel-primary);
    text-align: center;
    line-height: 1;
    margin-bottom: 5px;
}

.pricing-card-new .plan-price-small {
    font-size: 14px;
    color: var(--panel-text-subtle);
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pricing-card-new .plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    flex-grow: 1;
}

.pricing-card-new .plan-features li {
    padding: 12px 0;
    color: var(--panel-text);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pricing-card-new .plan-features li i {
    color: var(--panel-primary);
    font-size: 18px;
    flex-shrink: 0;
}

/* Image Placeholders */
.img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

/* Video Overlay */
.overlay-bg.t50 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(10, 14, 26, 0.8)) !important;
}

.de-gradient-edge-top,
.de-gradient-edge-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 200px;
    z-index: 1;
}

.de-gradient-edge-top {
    top: 0;
    background: linear-gradient(to bottom, rgba(10, 14, 26, 0.9), transparent);
}

.de-gradient-edge-bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(10, 14, 26, 0.9), transparent);
}

/* Site-wide panel color overrides */

/* Body and backgrounds */
body { background-color: var(--panel-bg) !important; }

/* Header */
header:not(.transparent) { background: var(--panel-surface) !important; border-bottom: 1px solid var(--panel-border) !important; }
/* Header styling */
header { background: var(--panel-bg) !important; border-bottom: 1px solid var(--panel-border) !important; }
header.transparent { 
    background: rgba(10, 14, 26, 0.95) !important; 
    border-bottom: 1px solid rgba(139, 92, 246, 0.3) !important; 
    backdrop-filter: blur(10px);
}
#mainmenu li a.menu-item { color: var(--panel-text) !important; }
#mainmenu li a.menu-item:hover { color: var(--panel-primary) !important; }

/* Buttons */
.btn-main { 
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-primary-hover)) !important; 
    color: #fff !important; 
    border: 2px solid var(--panel-primary) !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-main span {
    display: inline-flex !important;
    align-items: center !important;
}
.btn-main:hover { 
    /* simple highlight only - don't move or swap text */
    background: linear-gradient(135deg, var(--panel-primary-hover), var(--panel-primary)) !important; 
    transform: none !important;
    box-shadow: none !important;
    filter: brightness(1.03) !important;
}
.btn-line { 
    background: transparent !important; 
    color: var(--panel-text) !important; 
    border: 2px solid var(--panel-primary) !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-line span {
    display: inline-flex !important;
    align-items: center !important;
}
.btn-line:hover { 
    /* no elevation/translate on hover — only color change */
    background: var(--panel-primary) !important; 
    color: #fff !important; 
    transform: none !important;
    filter: brightness(1.04) !important;
}

/* Keep CTA button stacks tidy across breakpoints */
.cta-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cta-stack .btn-main,
.cta-stack .btn-line {
    flex-shrink: 0;
}

/* Disable original theme's 'text swap' hover effect for all buttons */
a.btn-main::before,
a.btn-main::after,
.btn-main::before,
.btn-main::after {
    display: none !important;
    opacity: 0 !important;
    transform: none !important;
}

a.btn-main span,
.btn-main span {
    opacity: 1 !important;
    margin-top: 0 !important;
    transition: none !important;
}

a.btn-main:hover span,
.btn-main:hover span {
    opacity: 1 !important;
    margin-top: 0 !important;
}

/* Footer */
footer { background: var(--panel-surface) !important; border-top: 1px solid var(--panel-border) !important; }
footer h5, footer p, footer li, footer a, footer small { color: var(--panel-text) !important; }
footer a:hover { color: var(--panel-primary) !important; }
.subfooter { background: var(--panel-surface-2) !important; border-top: 1px solid var(--panel-border) !important; }
.subfooter a { color: var(--panel-text-subtle) !important; }
.subfooter a:hover { color: var(--panel-primary) !important; }

/* Forms */
.form-control { background: var(--panel-surface-2) !important; border: 1px solid var(--panel-border) !important; color: var(--panel-text) !important; }
.form-control:focus { background: var(--panel-surface) !important; border-color: var(--panel-primary) !important; box-shadow: 0 0 0 .15rem rgba(140, 120, 92, 0.3) !important; }

/* Social icons - clean, no boxes */
.social-icons a { color: var(--panel-text) !important; border: none !important; background: transparent !important; }
.social-icons a:hover { background: transparent !important; color: var(--panel-primary) !important; }
.social-icons i { color: var(--panel-text) !important; }
.social-icons a:hover i { color: var(--panel-primary) !important; }

/* Newsletter button */
#btn-subscribe i { background: var(--panel-primary) !important; }

/* Sections and panels */
section:not(.jarallax) { background: transparent !important; }
#content { background: var(--panel-bg) !important; }

/* Cards and panels */
.de_pricing-table, .stat-card, .feature-box { background: var(--panel-surface) !important; border: 1px solid var(--panel-border) !important; }

/* Text colors - preserve white text over video sections */
h1, h2, h3, h4, h5, h6 { color: var(--panel-text) !important; }
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.text-white p, .text-white, .overlay-bg .text-white { color: #ffffff !important; }
p, a, li { color: var(--panel-text) !important; }
a:hover { color: var(--panel-primary) !important; }

/* Bootstrap/MDB overrides */
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--panel-border) !important; color: var(--panel-text) !important; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--panel-surface) !important; color: var(--panel-primary) !important; }
.accordion-button:focus { border-color: var(--panel-primary) !important; box-shadow: 0 0 0 .25rem rgba(140, 120, 92, .35) !important; }
.form-check-input:checked { background-color: var(--panel-primary) !important; border-color: var(--panel-primary) !important; }

/* Override overlays on images and videos - use purple theme */
.overlay-bg.t50, .overlay-bg.t60, .overlay-bg.t70, .overlay-bg.t80, .overlay-bg.t90 { 
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(10, 14, 26, 0.8)) !important; 
}
.overlay-bg.c1 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(10, 14, 26, 0.8)) !important; }
.overlay-bg.gradient-blue-aqua { 
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(10, 14, 26, 0.8)) !important;
}

/* Force all dark overlays to match purple theme */
.overlay-bg.dark { background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(10, 14, 26, 0.8)) !important; }
.de-video-overlay { background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(10, 14, 26, 0.8)) !important; }

/* Keep gradient edges with purple theme */
.de-gradient-edge-top { 
    top: 0 !important;
    background: linear-gradient(to bottom, rgba(10, 14, 26, 0.9), transparent) !important; 
    display: block !important;
}
.de-gradient-edge-bottom { 
    bottom: 0 !important;
    background: linear-gradient(to top, rgba(10, 14, 26, 0.9), transparent) !important; 
    display: block !important;
}

/* default color: #fa6a2e  */
.bg-color,
header,
section.bg-color,
section.call-to-action,
a.btn-main,
.btn-main,
#mainmenu li li a.menu-item:hover,
#mainmenu ul li:hover>a.menu-item,
.price-row,
.slider-info .text1,
.btn-primary,
.bg-id-color,
.dropcap,
.fullwidthbanner-container a.btn,
.feature-box-big-icon i,
#testimonial-full,
.icon-deco i,
.feature-box-small-icon .border,
.date-post,
.team-list .small-border,
.de-team-list .small-border,
.owl-arrow span,
.de-progress .progress-bar,
#btn-close-x:hover,
.box-fx .info,
.btn-more,
.widget .small-border,
.product img:hover,
#btn-search,
.de_tab.timeline li.active .dot,
.btn-id,
.tiny-border,
#subheader .small-border-deco span,
#services-list li a:hover,
#form_subscribe #btn-subscribe i,
.timeline .tl-block .tl-line,
.de_tab.tab_style_2 .de_nav li.active span,
.de_tab.tab_methods.style-2 .de_nav li.active span,
.feature-box-small-icon.style-2 .number.bg-color,
.owl-custom-nav .btn-next:before,
.owl-custom-nav .btn-prev:before,
.timeline>li>.timeline-badge,
.de_light .de_tab.tab_style_3 .de_nav li.active span,
.de_tab.tab_style_4 .de_nav li.active span,
.circle,
.social-icons-sm i:hover,
.btn-rsvp,
.pricing-table .ribbon,
.de_tab.tab_style_4 .de_nav li.active,
#preloader .s1 span,
#filters a.selected,
.custom-show:after,
.custom-close:after,
.widget-post .date,
.style-2 .date-box,
.d-card i,
.accordion-section-title:before,
#form_subscribe #btn-submit i,
.bg-gradient-to-right-2,
.d-card.hover i,
.d-card:hover i,
.ribbon,
.box-icon-simple .num,
.feature-box.f-boxed:hover,
.fpw-overlay-btm,
.fp-wrap .fpwow-icons,
.owl-item.active.center .feature-box-type-2,
.testimonial-color .item:nth-child(1n) blockquote:before,
.spinner>div,
.d-gallery-item .dgi-1,
a.btn-border:hover,
.dih-overlay,
.widget_tags li a,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link,
#cookieConsent a.cookieConsentOK,
.mask .cover,
.icon-box:hover,
.feature-box.f-boxed.invert,
.text-light .container-timeline ul li::before,
.text-light .de_countdown,
.text-light .dropdown li span,
#selector #dark-mode,
#selector #related-items,
.dropdown li span:hover,
.de-event-item .d-date,
.switch,
h5 span.label,
.lds-roller div:after,
.de_pricing-table .d-list li:before,
.ul-style-4 li:before,
#mainmenu ul li b,
h1.s2 .c1 span,
.d-arrow-left,
.d-arrow-right,
.de-marquee-list .d-item-block,
.scrollbar,
.d_demo_img .d-overlay span
 {
    background:linear-gradient(to right, var(--primary-color), var(--secondary-color));
}

::-moz-selection { /* Code for Firefox */
    color:#ffffff;
    background:var(--secondary-color);
}

::selection {
    color:#ffffff;
    background:var(--secondary-color);
}

#back-to-top,
.btn-line:hover,
a.btn-line:hover,
.btn-main.bg-color,
.de-marquee-list .d-item-block.bg-color{
    background: var(--primary-color);
}

.id-color,
.date-box .day,
.slider_text h1,
h1.id-color,
h2.id-color,
h3.id-color,
h4.id-color,
.pricing-box li h1,
.title span,
i.large:hover,
.feature-box-small-icon-2 i,
.pricing-dark .pricing-box li.price-row,
.ratings i,
header.smaller #mainmenu a.menu-item.active,
.pricing-dark .pricing-box li.price-row,
.dark .feature-box-small-icon i,
a.btn-slider:after,
a.btn-line:after,
.team-list .social a,
.de_contact_info i,
.dark .btn-line:hover:after,
.dark a.btn-line:hover:after,
.dark a.btn-line.hover:after,
a.btn-text:after,
.separator span i,
address span strong,
.widget_tags li a,
.dark .btn-line:after,
.dark a.btn-line:after,
.crumb li .active,
.btn-right:after,
.btn-left:before,
#mainmenu li a.menu-item:after,
header .info .social i:hover,
#services-list li.active,
#services-list li.active a:after,
.testimonial-list:before,
span.deco-big,
h2.hs1 span,
.blog-list .date-box .day,
.social-icons-sm i,
.de_tab.tab_style_4 .de_nav li span,
.de_testi.opt-2 blockquote:before,
.profile_pic .subtitle,
.countdown-s3 .countdown-period,
.countdown-s4 .countdown-period,
.social-icons i:hover,
a.btn-link,
blockquote.s1:before,
.accordion a:before,
.expand-custom .toggle:before,
.sitemap.s1 li:before,
.list li:before,
.post-meta span:before,
.mask .cover .date:before,
.pricing-s2 .bottom i,
.post-text h3 a:hover,
.demo-icon-wrap i,
.demo-icon-wrap-s2 span,
a.btn-border.light:hover,
.de_testi.opt-2.review .p-rating,
.p-title,
.h-phone i,
a.btn-main.btn-white,
a.bc-btn,
.de_tab .de_nav li span,
.nav-link, .nav-link:focus, .nav-link:hover,
.pricing-table .bottom i,
#topbar i,
.topbar-widget a span,
.de-icon,
a#cookit-link,
#mainmenu>li.has-child:after {
    color: var(--primary-color);
}


a,
a:hover,
footer .widget a:hover,
.id-color-2,
.id-color-secondary,
span.id-color-2,
.icon-box i,
.h-phone i.id-color-secondary,
.mask:hover .cover h3 i,
address.s1 span i,
.de_table .tr .td:nth-child(2) span,
.activity-filter i,
.dark-scheme .demo-icon-wrap i,
.dark-scheme .demo-icon-wrap-s2 span,
.de_tab .de_nav li span,
.dark-scheme .small-border,
.profile_username,
.de_tab.tab_methods .de_nav li.active span img,
.ul-style-3 li:after,
.accordion-button:not(.collapsed),
.ul-style-2 li:before,
.pricing-table.table-featured .bottom i,
.schedule-item .sc-name,
.social-icons i
{
    color: var(--secondary-color);
}


.bg-color-2,
.bg-color-secondary,
section.bg-color-2,
section.bg-color-secondary,
.timeline h5,
.testimonial-color .item:nth-child(2n) blockquote:before,
a.btn-main.bg-color-2,
a.btn-main.invert,
#mainmenu li li a.menu-item:hover,
#mainmenu ul li:hover>a.menu-item,
.icon-box.invert:hover,
#jpreBar,
.t-circle,
.author_list_pp i,
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus,
.profile_avatar i,
#btn_copy.clicked,
#form_quick_search #btn-submit i,
.owl-dot.active,
.p_list_pp i,
.author_list_pp img,
.activity-filter li.active,
.dark-scheme .de_countdown.bg-color-secondary,
.btn-line.hover,
a.btn-line.hover,
.de_form input[type="checkbox"]:checked + label:before,
.coll_list_pp i,
#form_sb #btn-submit i,
.de-switch input[type=checkbox]:checked + label,
.de-card .de-price span,
.de-color-icons i,
.container-timeline ul li::before,
.pricing-table.table-featured .mid,
.pricing-table.table-featured a.btn-main,
.page-item.active .page-link,
.de-marquee-list .d-item-block.bg-color-2{
    background: var(--secondary-color);
}

.bg-color-3{
    background: var(--tertiary-color);
}

section.dark {
    background: rgba(var(--primary-color-rgb), .98);
}

.feature-box-group .d-card i,
.accordion-section-title.active,
.accordion.secondary .accordion-section-title:before
.d-card i {
    background: var(--secondary-color);
}

.bg-gradient-to-right,
.post-image .post-info .inner,
.de_table.table-style-2:not(.no-heading) .tr:first-child,
h1 .label,
a.btn-main.secondary,
header.header-gradient,
.ribbon.s2 {
    background: var(--primary-color);
}

.table-pricing thead,
.bg-gradient-to-top-right,
.p-tagline,
h5.title{
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}

.gradient-soft {
    background: -moz-linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.125) 0%, rgba(var(--primary-color-rgb), 0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.125) 0%, rgba(var(--primary-color-rgb), 0) 100%);
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.125) 0%, rgba(var(--primary-color-rgb), 0) 100%);
}

.gradient-soft-2 {
    background: -moz-linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.2) 0%, rgba(var(--primary-color-rgb), 0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.2) 0%, rgba(var(--primary-color-rgb), 0) 100%);
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.2) 0%, rgba(var(--primary-color-rgb), 0) 100%);
}

.gradient-soft-45 {
    background: -moz-linear-gradient(45deg, rgba(var(--secondary-color-rgb), .3) 0%, rgba(var(--primary-color-rgb), .3) 100%);
    background: -webkit-linear-gradient(45deg, rgba(var(--secondary-color-rgb), .3) 0%, rgba(var(--primary-color-rgb), .3) 100%);
    background: linear-gradient(45deg, rgba(var(--secondary-color-rgb), .3) 0%, rgba(var(--primary-color-rgb), .3) 100%);
}

.d-card i,.d-card:hover i{
    background: -moz-linear-gradient(180deg, rgba(var(--primary-color-rgb), 1) 20%, rgba(var(--primary-color-rgb), 0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(var(--primary-color-rgb), 1) 20%, rgba(var(--primary-color-rgb), 0) 100%);
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 1) 20%, rgba(var(--primary-color-rgb), 0) 100%);
}

#preloader {
    background-image: linear-gradient(to top right, var(--primary-color), var(--secondary-color));
}

.overlay-gradient {
    background: -moz-linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.9) 0%, rgba(var(--primary-color-2-rgb), 0.9) 100%);
    background: -webkit-linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.9) 0%, rgba(var(--primary-color-2-rgb), 0.9) 100%);
    background: linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.9) 0%, rgba(var(--primary-color-2-rgb), 0.9) 100%);
}

.overlay-gradient.t80 {
    background: -moz-linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.8) 0%, rgba(var(--primary-color-2-rgb), 0.8) 100%);
    background: -webkit-linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.8) 0%, rgba(var(--primary-color-2-rgb), 0.8) 100%);
    background: linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.8) 0%, rgba(var(--primary-color-2-rgb), 0.8) 100%);
}

.overlay-gradient.t70 {
    background: -moz-linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.7) 0%, rgba(var(--primary-color-2-rgb), 0.7) 100%);
    background: -webkit-linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.7) 0%, rgba(var(--primary-color-2-rgb), 0.7) 100%);
    background: linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.7) 0%, rgba(var(--primary-color-2-rgb), 0.7) 100%);
}

.overlay-gradient.t60 {
    background: -moz-linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.6) 0%, rgba(var(--primary-color-2-rgb), 0.6) 100%);
    background: -webkit-linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.6) 0%, rgba(var(--primary-color-2-rgb), 0.6) 100%);
    background: linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.6) 0%, rgba(var(--primary-color-2-rgb), 0.6) 100%);
}

.overlay-gradient.t50 {
    background: -moz-linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.5) 0%, rgba(var(--primary-color-2-rgb), 0.5) 100%);
    background: -webkit-linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.5) 0%, rgba(var(--primary-color-2-rgb), 0.5) 100%);
    background: linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.5) 0%, rgba(var(--primary-color-2-rgb), 0.5) 100%);
}

.all-timelines::before {
    background: rgba(var(--secondary-color-rgb), .3);
}

.pricing-table .bottom i{
    background: rgba(var(--secondary-color-rgb), .2);
}

#topbar {
    background: rgba(var(--primary-color-rgb), .1);
}

.activity-list li:after{
    color: rgba(var(--secondary-color-rgb), 1);
}

.item_info_counts>div,
.de_table .tr .td:nth-child(2) span,
.activity-filter i,
.accordion-button:not(.collapsed) {
    background: rgba(var(--secondary-color-rgb), .1);
}

.activity-list li{
    background: rgba(var(--secondary-color-rgb), .07);
}

body::-webkit-scrollbar-thumb,#de_modal::-webkit-scrollbar-thumb
 {
    background:linear-gradient(0deg, var(--secondary-color), var(--primary-color));
}

a.btn-border.btn-invert,
.small-border,
.icon-box,
#slider-carousel .owl-thumb-item.active img {
    border-color: var(--primary-color);
}

.de_countdown,
.container-timeline ul li::before,
.de_tab.tab_methods .de_nav li.active span,
.dark-scheme .pagination li.active a{
    border-color: var(--secondary-color);
}

.author_list_pp:hover img{
    -webkit-box-shadow: 0px 0px 0px 2px rgba(var(--secondary-color-rgb), 1);
    -moz-box-shadow: 0px 0px 0px 2px rgba(var(--secondary-color-rgb), 1);
    box-shadow: 0px 0px 0px 2px rgba(var(--secondary-color-rgb), 1);
}

.form-border input[type=text]:focus,
.form-border textarea:focus,
.form-underline input[type=email]:focus,
.form-border input[type=date]:focus,
.form-border select:focus,
#quick_search:hover,
.items_filter .dropdown:hover{
    webkit-box-shadow: 0px 0px 0px 4px rgba(var(--primary-color-rgb), .3);
    -moz-box-shadow: 0px 0px 0px 4px rgba(var(--primary-color-rgb), .3);
    box-shadow: 0px 0px 0px 4px rgba(var(--primary-color-rgb), .3);
}

.container-timeline ul lifblockquote {
    border-left-color: var(--primary-color);
}

.de_tab.tab_simple .de_nav li.active span{
    border-bottom-color: var(--primary-color);
}

header #mainmenu a.menu-item span,
header.transparent #mainmenu a.menu-item span,
.de-grey #subheader h1 {
    border-bottom-color: var(--secondary-color);
}

.header-light #quick_search {
    background: rgba(var(--primary-color-rgb), .1);
}

.box-highlight{
    background: rgba(var(--primary-color-rgb), .2);
}

.container-timeline ul li {
    border-top-color: var(--secondary-color);
}

.line-preloader .p-line:nth-child(1) {
    border-right-color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

.line-preloader .p-line:nth-child(2) {
    border-left-color: var(--secondary-color);
    border-top-color: var(--secondary-color);
}

.line-preloader .p-line:nth-child(3) {
    border-right-color: var(--secondary-color);
    border-top-color: var(--secondary-color);
}

.de-event-item .d-shadow{
    border-color: transparent transparent transparent var(--secondary-color);;
}

.preloader1 {
    width: 60px;
    border-top-color: rgba(var(--primary-color-rgb), 0.65);
    border-bottom-color: rgba(var(--primary-color-rgb), 0.1);
    border-left-color: rgba(var(--primary-color-rgb), 0.1);
    border-right-color: rgba(var(--primary-color-rgb), 0.1);
}
.gradient,
.menu-col li a.active{
    background: -webkit-linear-gradient(45deg,var(--secondary-color) 0%, var(--primary-color) 100%);
    background: -moz-linear-gradient(45deg,var(--secondary-color) 0%, var(--primary-color) 100%);
    background: linear-gradient(45deg,var(--secondary-color) 0%, var(--primary-color) 100%);
}

.text-gradient{
    background: -webkit-linear-gradient(45deg,var(--primary-color) 0%, var(--secondary-color) 100%);
    background: -moz-linear-gradient(45deg,var(--primary-color) 0%, var(--secondary-color) 100%);
    background: linear-gradient(45deg,var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-soft{
background: -moz-linear-gradient(0deg, rgba(var(--primary-color-rgb), .45) 0%, rgba(var(--secondary-color-rgb), 0.25) 100%);
background: -webkit-linear-gradient(0deg, rgba(var(--primary-color-rgb), .45) 0%, rgba(var(--secondary-color-rgb), 0.25) 100%);
background: linear-gradient(0deg, rgba(var(--primary-color-rgb), .45) 0%, rgba(var(--secondary-color-rgb), 0.25) 100%);
}

.menu-col li a{
background: -moz-linear-gradient(45deg, rgba(var(--secondary-color-rgb), 0.2) 0%, rgba(var(--secondary-color-rgb), 0) 100%);
background: -webkit-linear-gradient(45deg, rgba(var(--secondary-color-rgb), 0.2) 0%, rgba(var(--secondary-color-rgb), 0) 100%);
background: linear-gradient(45deg, rgba(var(--secondary-color-rgb), 0.2) 0%, rgba(var(--secondary-color-rgb), 0) 100%);
}

footer.footer-light{
    background: -moz-linear-gradient(45deg, rgba(var(--secondary-color-rgb), .10) 0%, rgba(var(--primary-color-rgb), .10) 100%);
    background: -webkit-linear-gradient(45deg, rgba(var(--secondary-color-rgb), .10) 0%, rgba(var(--primary-color-rgb), .30) 100%);
    background: linear-gradient(45deg, rgba(var(--secondary-color-rgb), .30) 0%, rgba(var(--primary-color-rgb), .30) 100%);
}

.bg-gradient-to-bottom{
    background: -moz-linear-gradient(180deg, rgba(var(--primary-color-rgb), .35) 0%, rgba(var(--secondary-color-rgb), 0.25) 60%, rgba(var(--secondary-color-rgb), 0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(var(--primary-color-rgb), .35) 0%, rgba(var(--secondary-color-rgb), 0.25) 60%, rgba(var(--secondary-color-rgb), 0) 100%);
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), .35) 0%, rgba(var(--secondary-color-rgb), 0.25) 60%, rgba(var(--secondary-color-rgb), 0) 100%);
}

@media only screen and (max-width: 992px) {
    .table-pricing tbody tr th {
        background: var(--primary-color);
    }

}

/* Mobile-friendly button sizing and spacing (small screens) */
@media only screen and (max-width: 576px) {
    .btn-main, a.btn-main, .btn-line, a.btn-line {
        padding: 10px 18px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        height: auto !important;
        min-height: 44px !important;
    }

    /* Make large CTA buttons full width on tiny screens */
    .btn-main.btn-lg, a.btn-main.btn-lg { width: 100% !important; }

    /* Ensure icons inside buttons do not push layout on mobile */
    .btn-main img, .btn-main i, .btn-line img, .btn-line i { margin-right: 8px !important; }

    /* Reduce vertical spacing where lines or big gaps were causing overflow */
    .pricing-tabs { gap: 10px; margin-bottom: 30px; }
}

/* Hero and general mobile text sizing fixes */
@media only screen and (max-width: 576px) {
    /* cap heading sizes so they don't overflow on very small phones */
    .v-center h1, .v-center h1 span { font-size: 34px !important; line-height: 1.05 !important; }
    .v-center .lead { font-size: 15px !important; margin-top: 18px !important; margin-bottom: 18px !important; }
    .subtitle { font-size: 12px !important; }

    /* reduce some large paddings used elsewhere that cause whitespace issues on small screens */
    .img-placeholder { padding: 30px 20px !important; }
    .de-gradient-edge-top, .de-gradient-edge-bottom { height: 120px !important; }

    /* smaller header CTA to avoid overlapping the menu */
    header .menu_side_area .btn-main { padding: 8px 14px !important; font-size: 13px !important; }
}