/* ============================================================
   Brand theme — colors sampled directly from the Jagdish Singh
   logo (images/Jagdish_logo.jpeg): deep teal (the "J" mark and
   shield) + lime green (the "S" mark and "Singh" text).
   The base swap (navy #14235e -> teal #00695c, gold #e8960c ->
   green #5aa632) has been made in place across css/style.css,
   css/responsive.css and css/skin/color1.css. This file is loaded
   LAST and only adds small design refinements for the Videos /
   Gallery sections and fixes a couple of layout issues in the
   shared video-card markup.
   ============================================================ */

:root {
    --brand-teal: #00695c;
    --brand-teal-dark: #003d33;
    --brand-green: #5aa632;
    --brand-green-dark: #3f7a20;
    --brand-grad: linear-gradient(135deg, #00695c 0%, #5aa632 100%);
}

/* ============================================================
   Bootstrap's default .btn-primary (Refund/Policy/Term/Disclaimer
   footer buttons, the "May I Help You" form) is stock Bootstrap
   blue (#337ab7) and clashes with the teal/green brand palette
   everywhere else on the site.
   ============================================================ */
.btn-primary {
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-teal-dark) !important;
    border-color: var(--brand-teal-dark) !important;
}

/* css/skin/color1.css forces every ".footer-bottom a" (including the
   Refund/Policy/Term buttons above) to green text with !important —
   fine for the plain "Zaidi Corporation" credit link on the dark
   footer, but green-on-teal on the buttons themselves is barely
   readable. Force those buttons back to white. */
.footer-bottom a.btn {
    color: #fff !important;
}

/* ============================================================
   Click-to-call / click-to-email links
   Phone numbers and email addresses across the site (header,
   footer, contact page, calculators, TPA list and the branch
   locator table) were plain text and are now wrapped in tel:/
   mailto: links. Without this, unstyled <a> tags fall back to the
   browser's default link blue, which clashes with the surrounding
   text everywhere they were added. Keep them looking like plain
   text until hovered, wherever they land in the page.
   ============================================================ */
a[href^="tel:"],
a[href^="mailto:"] {
    color: inherit;
    text-decoration: none;
}

a[href^="tel:"]:hover,
a[href^="mailto:"]:hover {
    text-decoration: underline;
}

/* ============================================================
   VIDEO cards (Home "Videos We Recommended" + ResourceCenter/Videos)
   ============================================================ */

/* the inline <style> block in _Layout.cshtml pins every .blockstart to a
   fixed 400px height with a plain black border — that clips any content
   taller than the thumbnail (like the description we add below) and looks
   dated. Replace it with a card that grows to fit its content. */
.blockstart {
    height: auto;
    border: none !important;
    border-radius: 10px;
    overflow: hidden;
    padding: 0 !important;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
    transition: transform .35s ease, box-shadow .35s ease;
}

.blockstart:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 105, 92, .22);
}

/* the play-icon span is absolutely centred (see _Layout.cshtml) but had no
   positioned ancestor to centre against — anchor it to the thumbnail link
   itself so it centres on the image, not the whole card */
.blockstart > a.fancybox-media {
    position: relative;
    display: block;
}

/* turn the plain glyph into a proper circular play button. Centring the
   button itself uses the absolute/margin hack from _Layout.cshtml (kept in
   sync with this box's own width/height below); centring the glyph inside
   the button uses flexbox so the triangle sits in the middle of the circle
   instead of drifting off per line-height's text-baseline quirks */
.Video_blcok .blocks .blockstart span.fa-play {
    width: 62px;
    height: 62px;
    margin-top: -31px;
    margin-left: -31px;
    font-size: 24px;
    color: #fff;
    background: var(--brand-grad);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blockstart:hover span.fa-play {
    transform: scale(1.08);
}

.blockimg {
    object-fit: cover;
}

.Video_blcok .blocks {
    margin-bottom: 28px;
}

.Video_blcok .blockstart .videodes {
    margin: 12px 18px 18px;
    color: #5b6472;
    font-size: 13px;
    line-height: 20px;
}

/* ============================================================
   GALLERY cards (Home "Our Gallery" + Gallery/Gallery page)
   ============================================================ */

/* fixed-height thumbnails with no object-fit stretch/squash uploaded
   photos that don't exactly match the box's aspect ratio */
.single-project-item .img-box img {
    object-fit: cover;
}

/* ============================================================
   Section subtitles + view-all CTAs
   ============================================================ */
.sec-sub-text {
    margin: 12px 0 0;
    max-width: 620px;
    font-size: 15px;
    line-height: 25px;
    color: #5b6472;
}

/* Videos / Gallery teasers sit on a dark/gold overlay — keep the
   subtitle legible there instead of dark-on-dark */
.has-base-color-overlay .sec-sub-text,
.has-black-color-overlay .sec-sub-text,
.has-dark-texture .sec-sub-text {
    color: rgba(255, 255, 255, .85);
}

.section-cta {
    margin-top: 30px;
}

/* ============================================================
   Empty states (no videos / no photos yet)
   ============================================================ */
.gallery-empty,
.video-empty {
    padding: 60px 20px;
    text-align: center;
    color: #8592a0;
}

.gallery-empty i,
.video-empty i {
    display: block;
    margin-bottom: 14px;
    font-size: 42px;
    color: rgba(0, 105, 92, .2);
}

.has-base-color-overlay .gallery-empty,
.has-base-color-overlay .video-empty,
.has-black-color-overlay .gallery-empty,
.has-black-color-overlay .video-empty {
    color: rgba(255, 255, 255, .75);
}

.has-base-color-overlay .gallery-empty i,
.has-base-color-overlay .video-empty i,
.has-black-color-overlay .gallery-empty i,
.has-black-color-overlay .video-empty i {
    color: rgba(255, 255, 255, .35);
}

@media (max-width: 767px) {
    .sec-sub-text {
        font-size: 14px;
        line-height: 22px;
    }

    .Video_blcok .blocks {
        margin-bottom: 20px;
    }

    .section-cta {
        margin-top: 22px;
    }
}