@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body, h1, h2, h3, h4, h5, h6, p, a, span, .nav-link, .btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.header-left{
    max-width: 140px !important;
    width: 100%;
}
.navbar-brand {
    display: block;
}
img{
    width: 100%;
}

.features-section .features-preview img
{
    width: 100%;
}

.navbar-brand img.landing_logo
{
    width: 100%;
    height: 50px;
}

.container img.landing_logo
{
    width: 100%;
    height: 50px;
}

.features-section .features-preview{
    max-width: 80%;
    margin: 0 auto -390px;
}
.img-wrapper{
    position: relative;
    padding-top: 50%;
    width: 100%;
}
.img-wrapper img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*object-fit: scale-down;*/
    display: block;
    margin: 0 !important;
}
.features-preview .img-fluid{
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.features-preview .img-fluid:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.screenshot-card  h5{
    margin-top: 20px;
}

.screenshot-card  .img-wrapper{
    margin-bottom: 20px;
    padding-top: 60% ;
}

.footer-logo a{
    display: block;
    max-width: 180px;
    width: 100%;
}

.announcement p {
    margin-bottom: 0rem !important;
}

.img-wrapper{
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.img-wrapper:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}
html[dir="rtl"] .container-offset{
    margin-right: calc((100% - 1540px) / 2);
    margin-left: 0;
    padding-right: 15px;
    padding-left: 0;
}
html[dir="rtl"]  .main-banner .dash-preview{
right: 0;
    left: -80px;
}

@media (max-width:1500px) {
    .container {
        max-width: 1320px;
    }
    .main-banner .container-offset{
        margin-left: calc((100% - 1320px) / 2);
    }
    html[dir="rtl"] .container-offset{
        margin-right: calc((100% - 1320px) / 2);
    }
}

@media (max-width:1260px) {
    .main-banner .container-offset{
        margin-left: 0;
    }
    html[dir="rtl"] .container-offset{
        margin-right:0;
    }
}
@media (max-width:991px) {
    html[dir="rtl"] .main-banner .dash-preview{
        left:-15px;
    }
}
@media (max-width:767px){
    html[dir="rtl"] .main-banner .dash-preview{
        left:0;
    }
    .container-offset{
        padding: 0 15px !important;
    }
}
body.landing-dark .bg-gray-100{
    background: linear-gradient(141.55deg, #22242C 3.46%, #22242C 99.86%);
    color: var(--bs-body-color);
}
body.landing-dark  .site-footer .footer-row .ftr-col .list-unstyled li a{
    color: var(--bs-body-color);
}
body.landing-dark  .site-footer{
    border-top: 1px solid #9d9d9d4a;
}
/* scrollbar css */
::-webkit-scrollbar {
    display: none;
}

/* --------------- PROFESSIONAL BRAND THEME SECURE OVERRIDES ---------------- */
/* These rules defeat all dynamic colors (theme-1, theme-3, custom-color, etc) */

body {
    background: #f8fafc !important; /* Clean light background for body */
}

/* Override the dynamic bright green background for primary blocks */
body .bg-primary,
body .main-banner.bg-primary, 
body .subscription.bg-primary,
body[class*="theme-"] .bg-primary,
body.custom-color .bg-primary {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

/* Text visibility on Dark Slate Hero */
body .main-banner h1, 
body .main-banner h2, 
body .main-banner h3, 
body .main-banner h4, 
body .main-banner h5, 
body .main-banner h6,
body .subscription.bg-primary h1, 
body .subscription.bg-primary h2, 
body .subscription.bg-primary h6,
body .main-banner .logo-text,
body .main-banner .text-dark,
body .main-banner .text-body {
    color: #f8fafc !important;
}

body .main-banner p, 
body .main-banner span:not(.badge), 
body .subscription.bg-primary p {
    color: #cbd5e1 !important;
}

/* Buttons in Hero */
body .main-banner a.btn-outline-dark {
    border-color: rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.05) !important;
    color: #ffffff !important;
}
body .main-banner a.btn-outline-dark:hover {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #ffffff !important;
}

/* Primary Accent Cards (Blue) */
body .card.bg-primary, 
body .bg-primary.card {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; 
}

/* Typography Overrides */
body h2.text-primary,
body .text-primary {
    color: #2563eb !important;
}

body .features-section .title h2 b {
    color: #0f172a !important; /* Make sure features title is dark on white bg */
}

/* Fix Login / Register button colors in Nav */
body .main-header .navbar .btn-outline-dark {
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
}
body .main-header .navbar .btn-outline-dark:hover {
    background-color: #f8fafc !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
}

/* White Header Overrides */
body .main-header {
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    position: fixed !important;
}
body .main-header .announcement {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}

/* ---------- Landing pricing: discount / marketing ---------- */
.subscription .plan-landing-card {
    border-radius: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.subscription .plan-landing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.35);
}

.subscription .plan-card-popular {
    border: 2px solid #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

.subscription .plan-popular-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
}

.subscription .plan-card-has-offer .plan-popular-pill {
    top: 44px;
}

.subscription .plan-save-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}

.subscription .plan-save-ribbon__inner {
    position: absolute;
    top: 22px;
    right: -38px;
    width: 160px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    padding: 8px 0;
    background: linear-gradient(90deg, #f97316 0%, #ef4444 100%);
    transform: rotate(45deg);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.45);
}

.subscription .plan-landing-price {
    font-size: clamp(2.25rem, 5vw, 3.25rem) !important;
    line-height: 1.05;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    padding-bottom: 0.5rem;
}

.subscription .plan-card-dark .plan-landing-price {
    border-bottom-color: rgba(148, 163, 184, 0.25);
}

.subscription .plan-save-chip {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.45);
}

body.landing-dark .subscription .plan-save-chip {
    background: rgba(34, 197, 94, 0.2);
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.5);
}

.subscription .plan-cta-btn {
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

.subscription .plan-card-dark .plan-cta-btn {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.subscription .plan-feature-list li + li {
    margin-top: 0.5rem;
}