/*
 * Star Digital shared public theme
 * Uses the web_development.php palette as the site-wide visual system.
 */
:root {
    --sd-primary: #2563eb;
    --sd-primary-dark: #1d4ed8;
    --sd-teal: #0d9488;
    --sd-emerald: #10b981;
    --sd-navy: #1a2a3a;
    --sd-navy-deep: #0f172a;
    --sd-ink: #102033;
    --sd-muted: #64748b;
    --sd-soft: #f6f9fc;
    --sd-soft-2: #eef6fb;
    --sd-border: rgba(26, 42, 58, 0.1);
    --sd-gradient: linear-gradient(135deg, #2563eb, #0d9488);
    --sd-gradient-emerald: linear-gradient(135deg, #10b981, #2563eb);
    --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%);
    --sd-shadow: 0 18px 48px rgba(15, 23, 42, 0.1);
    --sd-shadow-hover: 0 26px 70px rgba(15, 23, 42, 0.16);
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary-color: #0d9488;
}

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

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

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

/* Shared text treatments copied from the web development page. */
.gradient-text,
.gradient-text-emerald,
.gradient-text-ocean,
.gradient-text-royal {
    background: var(--sd-gradient-emerald) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.webdesign-hero .gradient-text,
.ecomm-hero .gradient-text,
.section-title .gradient-text,
.section-title-gradient,
.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;
}

.stat-number,
.hero-stats .stat-num,
.hero-stats .stat-number {
    color: var(--sd-emerald) !important;
}

.section-title,
.section-title h2,
h1.page-title {
    color: var(--sd-navy);
    font-weight: 800;
    letter-spacing: 0;
}

.section-subtitle,
.sub-title,
.subtitle,
.sec-title,
.premium-badge {
    color: var(--sd-primary-dark);
}

/* Header and navigation feel aligned with the web development page. */
.full-width-header,
.header-middle,
.menu-area,
.main-menu,
#rs-header {
    background: #fff;
}

.rs-menu ul.nav-menu > li > a,
.main-menu .nav-menu > li > a,
.menu-area .navbar ul li a {
    color: var(--sd-navy) !important;
    font-weight: 700;
}

.rs-menu ul.nav-menu > li > a:hover,
.main-menu .nav-menu > li > a:hover,
.menu-area .navbar ul li a:hover {
    color: var(--sd-primary) !important;
}

.rs-menu ul.sub-menu,
.nav-menu .sub-menu {
    border-top: 3px solid var(--sd-emerald);
    box-shadow: var(--sd-shadow);
}

/* Legacy breadcrumb pages get the same navy hero surface. */
.rs-breadcrumbs {
    position: relative;
    overflow: hidden;
    background: var(--sd-hero-bg) !important;
}

.rs-breadcrumbs::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: 0.72;
}

.rs-breadcrumbs .container,
.rs-breadcrumbs-inner,
.rs-breadcrumbs .breadcrumbs-inner {
    position: relative;
    z-index: 1;
}

.rs-breadcrumbs .page-title,
.rs-breadcrumbs nav ul li,
.rs-breadcrumbs nav ul li a,
.rs-breadcrumbs nav ul li span {
    color: #fff !important;
}

.rs-breadcrumbs nav ul li a:hover {
    color: #d1fae5 !important;
}

/* CTA buttons: match web development page gradient and rounded shape. */
.btn-primary,
.btn-send,
.readon,
.primary-btn,
.services-btn.primary,
.detail-btn.primary,
.cart-btn.primary,
.card-btn.primary,
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);
    transition: all 0.25s ease;
}

.btn-primary:hover,
.btn-send: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);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.22);
}

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

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

/* Generic page sections become soft bands instead of flat white blocks. */
.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,
.cart-page,
.service-overview,
.services-offered {
    background:
        radial-gradient(circle at 12% 12%, rgba(37, 99, 235, 0.06), transparent 28%),
        linear-gradient(180deg, #fff 0%, var(--sd-soft) 100%);
}

/* Cards, forms, and repeated boxes. */
.service-card,
.offering-card,
.single-service,
.rs-services .services-item,
.pricing-card,
.package-card,
.cart-card,
.cart-summary,
.login-width,
section .contact-info,
main .contact-info,
.contact-form,
.icon-box,
.blog-item,
.team-item,
.card,
.portfolio-item,
.testimonial-card,
.faq-item,
.process-card {
    border: 1px solid var(--sd-border) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !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,
.blog-item:hover,
.team-item:hover,
.portfolio-item:hover,
.faq-item:hover,
.process-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sd-shadow-hover) !important;
}

.service-card h3,
.offering-card h3,
.single-service h3,
.rs-services .services-item h3,
.pricing-card h3,
.package-card h3,
.cart-card h3,
section .contact-info h3,
main .contact-info h3,
.blog-item h3 {
    color: var(--sd-navy) !important;
}

.service-card p,
.offering-card p,
.single-service p,
.rs-services .services-item p,
.pricing-card p,
.package-card p,
.cart-card p,
section .contact-info p,
main .contact-info p,
.blog-item p {
    color: var(--sd-muted);
}

.rs-hostlab-footer .contact-info,
.enhanced-footer .contact-info {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.service-icon,
.icon-ring,
.features-list .feature-icon,
.contact-icon,
.cart-icon,
.package-icon,
.rs-services .services-icon {
    color: var(--sd-primary) !important;
    background: rgba(37, 99, 235, 0.09) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
}

/* Forms: contact, login, checkout. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea,
.form-control {
    border: 1px solid rgba(26, 42, 58, 0.14) !important;
    border-radius: 12px !important;
    color: var(--sd-navy);
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--sd-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}

/* Tables and checkout summaries. */
table,
.table {
    color: var(--sd-navy);
}

thead,
.table thead th {
    background: var(--sd-hero-bg);
    color: #fff;
}

.cart-total,
.price,
.amount,
.package-price,
.detail-price {
    color: var(--sd-teal) !important;
}

/* Footer and bottom CTA: same deep surface as web development hero. */
.rs-footer,
footer,
.cta-section,
.final-cta,
.detail-final-cta {
    background: var(--sd-hero-bg) !important;
}

.rs-footer,
.rs-footer a,
footer,
footer a,
.cta-section,
.final-cta,
.detail-final-cta {
    color: rgba(255, 255, 255, 0.82) !important;
}

.rs-footer h3,
.rs-footer h4,
footer h3,
footer h4,
.cta-section h2,
.final-cta h2,
.detail-final-cta h2 {
    color: #fff !important;
}

@media (max-width: 767px) {
    .section-title,
    .section-title h2 {
        font-size: 30px;
        line-height: 1.25;
    }

    .btn-primary,
    .btn-outline,
    .readon,
    .primary-btn,
    .services-btn,
    .detail-btn,
    .cart-btn,
    .card-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}