/*
 * Star Digital final visual pass
 * Loaded from footer so it wins over older page-level inline palettes.
 */
:root {
    --sd-primary: #2563eb !important;
    --sd-primary-dark: #1d4ed8 !important;
    --sd-teal: #0d9488 !important;
    --sd-emerald: #10b981 !important;
    --sd-navy: #1a2a3a !important;
    --sd-navy-deep: #0f172a !important;
    --sd-ink: #102033 !important;
    --sd-muted: #64748b !important;
    --sd-soft: #f6f9fc !important;
    --sd-border: rgba(26, 42, 58, 0.1) !important;
    --sd-gradient: linear-gradient(135deg, #2563eb, #0d9488) !important;
    --sd-gradient-emerald: linear-gradient(135deg, #10b981, #2563eb) !important;
    --sd-hero-bg:
        radial-gradient(circle at 18% 18%, rgba(16, 185, 129, 0.24), transparent 30%),
        radial-gradient(circle at 82% 14%, rgba(37, 99, 235, 0.28), transparent 34%),
        linear-gradient(135deg, #102033 0%, #1a2a3a 58%, #0f172a 100%) !important;
    --sd-shadow: 0 18px 48px rgba(15, 23, 42, 0.1) !important;
    --sd-shadow-hover: 0 26px 70px rgba(15, 23, 42, 0.16) !important;
    --primary: #2563eb !important;
    --primary-color: #2563eb !important;
    --primary-dark: #1d4ed8 !important;
    --primary-light: #54c7e0 !important;
    --secondary: #0d9488 !important;
    --secondary-color: #0d9488 !important;
    --secondary-light: #10b981 !important;
    --accent: #10b981 !important;
    --gradient-1: linear-gradient(135deg, #2563eb, #0d9488) !important;
    --gradient-2: linear-gradient(135deg, #10b981, #2563eb) !important;
    --gradient-3: linear-gradient(135deg, #10b981, #2563eb) !important;
    --shadow-hover: 0 30px 60px rgba(37, 99, 235, 0.24) !important;
    --shadow-glow: 0 0 30px rgba(37, 99, 235, 0.32) !important;
}

body {
    background: var(--sd-soft) !important;
    color: var(--sd-navy) !important;
}

a {
    color: var(--sd-primary);
}

a:hover,
a:focus {
    color: var(--sd-teal);
}

.home-hero,
.service-hero,
.webdesign-hero,
.ecomm-hero,
.hire-hero,
.about-hero,
.logo-hero,
.smm-hero,
.seo-hero,
.dm-hero,
.wp-hero,
.tech-hero,
.cart-hero,
.freelancer-hero,
.rs-breadcrumbs,
[class*="-hero"] {
    background: var(--sd-hero-bg) !important;
    color: #fff !important;
    overflow: hidden;
}

.home-hero h1,
.service-hero h1,
.webdesign-hero h1,
.ecomm-hero h1,
.hire-hero h1,
.about-hero h1,
.logo-hero h1,
.smm-hero h1,
.seo-hero h1,
.dm-hero h1,
.wp-hero h1,
.tech-hero h1,
.cart-hero h1,
.freelancer-hero h1,
[class*="-hero"] h1,
[class*="-hero"] h2,
[class*="-hero"] p {
    color: #fff !important;
}

.hero-badge,
.hero-eyebrow,
.freelancer-kicker,
.premium-badge,
.section-badge,
.subtitle-badge {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    color: #d1fae5 !important;
    border-radius: 999px !important;
}

.gradient-text,
.gradient-text-emerald,
.gradient-text-ocean,
.gradient-text-royal,
.gradient-text-coral,
.gradient-text-teal,
.section-title-gradient,
.section-title .gradient-text,
.hero-title .gradient-text {
    background: var(--sd-gradient-emerald) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-block;
}

.section-title,
.section-title h2,
h1.page-title,
.sec-title h2,
.title,
.widget-title {
    color: var(--sd-navy) !important;
    letter-spacing: 0 !important;
}

.section-lead,
.section-subtitle,
.hero-description,
.hero-subtitle,
.hero-text,
.sec-title .desc,
.desc,
.lead,
p {
    letter-spacing: 0 !important;
}

.home-hero .hero-eyebrow,
.stat-number,
.stat-num,
.hero-stats .stat-number,
.hero-stats .stat-num,
.counter-number,
.price,
.package-price,
.service-price {
    color: var(--sd-emerald) !important;
}

.btn-primary,
.btn-send,
.btn-cta,
.btn-pricing,
.btn-table,
.btn-submit,
.freelancer-btn.primary,
.readon,
.primary-btn,
.services-btn.primary,
.detail-btn.primary,
.cart-btn.primary,
.card-btn.primary,
.newsletter-btn,
#back-to-top-btn,
button[type="submit"],
input[type="submit"] {
    background: var(--sd-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 50px !important;
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.26) !important;
    transition: all 0.25s ease !important;
}

.btn-primary:hover,
.btn-send:hover,
.btn-cta:hover,
.btn-pricing:hover,
.btn-table:hover,
.btn-submit:hover,
.freelancer-btn.primary:hover,
.readon:hover,
.primary-btn:hover,
.services-btn.primary:hover,
.detail-btn.primary:hover,
.cart-btn.primary:hover,
.card-btn.primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.22) !important;
}

.btn-outline,
.freelancer-btn.secondary,
.services-btn.secondary,
.detail-btn.secondary,
.cart-btn.secondary,
.card-btn.secondary,
.secondary-btn {
    background: #fff !important;
    border: 1px solid rgba(26, 42, 58, 0.16) !important;
    color: var(--sd-navy) !important;
    border-radius: 50px !important;
}

.btn-outline:hover,
.freelancer-btn.secondary:hover,
.services-btn.secondary:hover,
.detail-btn.secondary:hover,
.cart-btn.secondary:hover,
.card-btn.secondary:hover,
.secondary-btn:hover {
    background: var(--sd-gradient) !important;
    color: #fff !important;
}

.sec-spacer,
.rs-about,
.rs-services,
.rs-contact,
.rs-contact-info,
.rs-contact-comment,
.rs-login-section,
.rs-registration,
.rs-blog,
.rs-team,
.rs-pricing,
.service-overview,
.services-offered,
.freelancer-section,
.section-padding {
    background:
        radial-gradient(circle at 12% 12%, rgba(37, 99, 235, 0.055), transparent 28%),
        linear-gradient(180deg, #fff 0%, var(--sd-soft) 100%) !important;
}

.service-card,
.offering-card,
.single-service,
.rs-services .services-item,
.pricing-card,
.package-card,
.info-card,
.process-card,
.feature-card,
.why-card,
.tech-card,
.solution-card,
.testimonial-card,
.faq-card,
.faq-item,
.cart-card,
.cart-summary,
.login-width,
.contact-form,
.contact-info,
.hero-card,
.blog-item,
.team-item,
.portfolio-item,
.icon-box,
.card {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--sd-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--sd-shadow) !important;
}

.service-card:hover,
.offering-card:hover,
.single-service:hover,
.rs-services .services-item:hover,
.pricing-card:hover,
.package-card:hover,
.info-card:hover,
.process-card:hover,
.feature-card:hover,
.why-card:hover,
.tech-card:hover,
.solution-card:hover,
.testimonial-card:hover,
.faq-card:hover,
.blog-item:hover,
.team-item:hover,
.portfolio-item:hover,
.icon-box:hover,
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sd-shadow-hover) !important;
}

.service-icon,
.feature-icon,
.process-icon,
.why-icon,
.tech-icon,
.contact-icon,
.package-icon,
.icon-box i,
.single-service i,
.rs-services .services-item .services-icon {
    color: var(--sd-primary) !important;
}

.footer-wave-top path {
    fill: var(--sd-primary) !important;
}

.enhanced-footer,
.rs-hostlab-footer {
    background:
        radial-gradient(circle at 16% 18%, rgba(16, 185, 129, 0.18), transparent 28%),
        linear-gradient(135deg, #102033 0%, #1a2a3a 58%, #0f172a 100%) !important;
}

.widget-title-underline span,
.newsletter-btn,
#back-to-top-btn {
    background: var(--sd-gradient) !important;
}

.footer-links a:hover,
.contact-value a:hover,
.footer-bottom-links ul li a:hover,
.social-title,
.payment-title,
.newsletter-title {
    color: #d1fae5 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--sd-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

@media (max-width: 767px) {
    [class*="-hero"],
    .home-hero,
    .service-hero {
        padding-top: 64px !important;
        padding-bottom: 52px !important;
    }
}