/* Orchid Builders — public marketing site */

:root {
    --ob-teal: #048895;
    --ob-teal-dark: #036e78;
    --ob-teal-tint: #e1f3f4;
    --ob-crimson: #e21e28;
    --ob-magenta: #b4397d;
    --ob-gold: #c17f17;
    --ob-amber: #fcc91b;
    --ob-cream: #fdf7ec;
    --ob-dark: #0d2126;
    --ob-border: #e5ded2;
}

/* The TemplateMo base theme floats .navbar as position:absolute, transparent,
   for overlaying a hero image on a one-page layout. Our header is opaque and
   this is a multi-page site, so it must sit in normal flow and stick on scroll
   instead of overlapping the content below it. */
.navbar.sticky-top { position: sticky; top: 0; }

.ob-hero {
    background: linear-gradient(135deg, var(--ob-dark) 0%, var(--ob-teal) 55%, var(--ob-magenta) 100%);
    color: #fff;
    padding: 100px 0 80px;
}
.ob-hero h1 { font-weight: 800; font-size: 2.75rem; }
.ob-hero p.lead { color: #e7f4f4; }
.ob-btn-light { background: #fff; color: var(--ob-dark); font-weight: 600; padding: .65rem 1.5rem; border-radius: .375rem; }
.ob-btn-light:hover { background: var(--ob-cream); color: var(--ob-dark); }
.ob-btn-outline-light { border: 2px solid #fff; color: #fff; font-weight: 600; padding: .6rem 1.5rem; border-radius: .375rem; }
.ob-btn-outline-light:hover { background: #fff; color: var(--ob-dark); }

.ob-stats { background: var(--ob-cream); padding: 50px 0; }
.ob-stat-number { font-size: 2.25rem; font-weight: 800; color: var(--ob-teal); }
.ob-stat-label { color: #555; font-weight: 600; }

.ob-section { padding: 80px 0; }
.ob-section-title { font-weight: 800; margin-bottom: .5rem; }
.ob-section-subtitle { color: #6b6b6b; max-width: 620px; margin: 0 auto 3rem; }

.ob-service-card {
    border: 1px solid var(--ob-border);
    border-radius: .75rem;
    padding: 2rem 1.5rem;
    height: 100%;
    transition: box-shadow .2s, transform .2s;
    background: #fff;
}
.ob-service-card:hover { box-shadow: 0 10px 30px rgba(4,136,149,.12); transform: translateY(-4px); }
.ob-service-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--ob-teal-tint);
    color: var(--ob-teal);
    display: grid;
    place-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}

.ob-project-card { border-radius: .75rem; overflow: hidden; border: 1px solid var(--ob-border); background: #fff; height: 100%; }
.ob-project-thumb {
    height: 200px;
    background: linear-gradient(135deg, var(--ob-teal), var(--ob-magenta));
    display: grid;
    place-content: center;
    color: rgba(255,255,255,.85);
    font-size: 2.5rem;
}
.ob-project-body { padding: 1.25rem; }
.ob-badge-status { font-size: .7rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; }

.ob-testimonial { background: #fff; border: 1px solid var(--ob-border); border-radius: .75rem; padding: 2rem; height: 100%; }
.ob-testimonial i.bi-quote { font-size: 1.75rem; color: var(--ob-teal); }

.ob-cta { background: linear-gradient(135deg, var(--ob-dark), var(--ob-teal-dark)); color: #fff; padding: 60px 0; text-align: center; }

.ob-avatar-circle {
    width: 90px; height: 90px; border-radius: 50%;
    background: var(--ob-teal-tint); color: var(--ob-teal);
    display: grid; place-content: center; font-size: 2rem; margin: 0 auto 1rem;
}

/* Auth pages (login / forgot password / verify OTP / reset password) */
.ob-auth-page { padding: 70px 0; background: var(--ob-cream); }
.ob-auth-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ob-border);
    border-radius: .75rem;
    padding: 2.75rem 2.5rem;
    box-shadow: 0 10px 40px rgba(4,136,149,.1);
}
.ob-auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--ob-amber), var(--ob-magenta), var(--ob-teal), var(--ob-crimson), var(--ob-gold));
}
.ob-auth-card .form-label { font-weight: 600; font-size: .9rem; }
.ob-auth-card .input-group-text { background: #fff; border-right: 0; color: var(--ob-teal); }
.ob-auth-card .input-group .form-control { border-left: 0; }
.ob-auth-card .input-group .form-control:focus { box-shadow: none; border-color: #ced4da; }
.ob-auth-card .input-group:focus-within { box-shadow: 0 0 0 .2rem rgba(4,136,149,.15); border-radius: .375rem; }
.ob-auth-card .input-group:focus-within .form-control,
.ob-auth-card .input-group:focus-within .input-group-text { border-color: var(--ob-teal); }
.ob-auth-card .form-check-input[type=checkbox] { width: 1em; height: 1em; padding: 0; margin-top: .25em; }
.ob-auth-card .form-check-input:checked { background-color: var(--ob-teal); border-color: var(--ob-teal); }
.ob-auth-card a { color: var(--ob-teal); font-weight: 600; text-decoration: none; }
.ob-auth-card a:hover { color: var(--ob-teal-dark); text-decoration: underline; }