/* Justify body paragraph text site-wide for cleaner, evenly-aligned edges.
   text-align-last keeps the final line left-aligned instead of stretching it. */
p {
    text-align: justify;
    text-align-last: left;
}

/* Blog/service cards were showing a stray colored border on hover that
   couldn't be traced to any existing rule (likely the browser's own
   default focus ring). Force it off regardless of source, without
   touching any existing hover box-shadow/lift effects. */
.dz-card, .dz-card *, .dz-media, .dz-media img {
    outline: none !important;
}
.dz-card:hover, .dz-card:focus, .dz-card:focus-within,
.dz-media:hover, .dz-media img:hover {
    border-color: transparent !important;
}

/* Vidya Eye Hospital brand palette, sampled from the supplied logo. */
html[data-theme-color="skin-8"] {
    --bs-body-color: #4b5563;
    --bs-heading-color: #102d89;
    --bs-heading-color-rgb: 16, 45, 137;
    --bs-primary: #ed001d;
    --bs-primary-rgb: 237, 0, 29;
    --bs-secondary: #102d89;
    --bs-secondary-rgb: 16, 45, 137;
    --bs-light: #f3f6ff;
    --bs-light-rgb: 243, 246, 255;
    --bs-primary-text-emphasis: #a60014;
    --bs-secondary-text-emphasis: #0b1f60;
    --bs-primary-bg-subtle: #ffe8eb;
    --bs-secondary-bg-subtle: #e8edff;
    --bs-primary-border-subtle: #ffb8c1;
    --bs-secondary-border-subtle: #bdc9f4;
    --bs-primary-btn-hover-bg: #c90019;
    --bs-primary-btn-hover-border-color: #c90019;
    --bs-secondary-btn-hover-bg: #0b216b;
    --bs-secondary-btn-hover-border-color: #0b216b;
    --gradient-primary: linear-gradient(135deg, #ed001d 0%, #b9002e 100%);
    --primary-hover: #c90019;
    --border-color: #dce3f5;
}

html[data-theme-color="skin-8"] ::selection {
    color: #fff;
    background: #102d89;
}

.site-header .main-bar-wraper {
    border-bottom: 3px solid #102d89;
}

/* Inner-page banners (Blog Grid, Services, Contact, etc.) used a hardcoded
   var(--bs-primary) wash at 70% opacity for their photo overlay. Since our
   brand primary is red, every one of these banners rendered as a heavy red
   tint. Swap it for a white wash with dark heading text instead. */
.dz-bnr-inr.style-1:after {
    background: #ffffff;
    opacity: 0.85;
}

.dz-bnr-inr.style-1 h1,
.dz-bnr-inr.style-1 .h1 {
    color: #102d89;
}

/* Same treatment for the lighter banner variant (Clinic Gallery, Our Doctor,
   etc.), which used the theme's --bs-light (a pale blue tint) — make it a
   true white wash for consistency across every page banner. */
.overlay-primary-light:before,
.overlay-primary-middle:before,
.overlay-primary-dark:before,
.overlay-primary:before {
    background: #ffffff;
}

.site-header .nav > li > a:hover,
.site-header .nav > li.active > a,
.site-header .nav > li:hover > a {
    color: #ed001d;
}

.btn-primary {
    box-shadow: 0 8px 20px rgba(237, 0, 29, .18);
}

.btn-primary:hover,
.btn-primary:focus {
    box-shadow: 0 10px 24px rgba(201, 0, 25, .28);
}

.site-footer {
    background-color: #091b54;
}

.logo-header img,
.footer-logo img,
.sidebar-header img,
.content-logo img {
    width: auto;
    max-width: 210px;
    max-height: 82px;
    object-fit: contain;
}

.footer-logo img {
    background: #fff;
    border-radius: 10px;
    padding: 7px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

.form-status {
    position: fixed;
    z-index: 99999;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 620px);
    padding: 14px 20px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
}

.form-status.success { background: #102d89; }
.form-status.error { background: #ed001d; }

@media (max-width: 575.98px) {
    .logo-header img,
    .sidebar-header img {
        max-width: 155px;
        max-height: 62px;
    }
}

.clinic-gallery .gallery-card {
    position: relative;
    display: block;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    border-radius: 18px;
    background: #102d89;
    box-shadow: 0 12px 30px rgba(16, 45, 137, .12);
}

.clinic-gallery .gallery-card img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    transition: transform .4s ease, opacity .4s ease;
}

.clinic-gallery .gallery-card span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 35px 20px 18px;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(transparent, rgba(9, 27, 84, .92));
}

.clinic-gallery .gallery-card:hover img {
    transform: scale(1.045);
    opacity: .88;
}

.doctor-profile-photo {
    overflow: hidden;
    border: 7px solid #fff;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(16, 45, 137, .18);
}

.doctor-profile-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
}

.hero-thumbnail .thumbnail,
.hero-thumbnail .thumbnail2 {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-thumbnail .hero-eye-image {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.hero-thumbnail .hero-eye-image .thumbnail {
    aspect-ratio: 16 / 9;
}

.hero-thumbnail .col-5 > .row > .col-12 .thumbnail {
    aspect-ratio: 16 / 10;
}

.hero-thumbnail .thumbnail2 {
    height: 100%;
    min-height: 520px;
    object-position: center 42%;
}

@media (max-width: 991.98px) {
    .hero-thumbnail .thumbnail2 {
        min-height: 390px;
    }
}

.fixed-social-bar {
    position: fixed;
    z-index: 9998;
    top: 50%;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    transform: translateY(-50%);
}

.fixed-social-bar a {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
    box-shadow: 0 6px 18px rgba(9, 27, 84, .2);
    transition: transform .2s ease, box-shadow .2s ease;
}

.fixed-social-bar a:hover {
    color: #fff;
    transform: translateX(-4px);
    box-shadow: 0 9px 24px rgba(9, 27, 84, .3);
}

.fixed-social-bar .social-instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.fixed-social-bar .social-facebook { background: #1877f2; }
.fixed-social-bar .social-whatsapp { background: #25d366; }
.fixed-social-bar .social-google { background: #ea4335; }

.contact-form-section {
    background: linear-gradient(135deg, #f7f9ff 0%, #fff 58%, #fff5f6 100%) !important;
}

.contact-form-card {
    background: transparent;
}

.contact-form-visual {
    position: relative;
    min-height: 650px;
    height: 100%;
    overflow: hidden;
    border: 1px solid #dce3f5;
    border-radius: 26px;
    background: #102d89;
    box-shadow: 0 20px 48px rgba(16, 45, 137, .12);
}

.contact-form-visual::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, transparent 35%, rgba(9, 27, 84, .9) 100%);
}

.contact-form-visual > img {
    width: 100%;
    height: 100%;
    min-height: 650px;
    object-fit: cover;
    object-position: center;
}

.contact-visual-caption {
    position: absolute;
    z-index: 1;
    right: 45px;
    bottom: 42px;
    left: 45px;
    color: #fff;
}

.contact-visual-caption span {
    display: inline-block;
    margin-bottom: 12px;
    color: #fff;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.contact-visual-caption h2,
.contact-visual-caption p { color: #fff; }
.contact-visual-caption p { margin-bottom: 0; }

.contact-form-panel {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 55px;
    border: 1px solid #dce3f5;
    border-radius: 26px;
    background: #f3f6ff;
    box-shadow: 0 20px 48px rgba(16, 45, 137, .1);
}

.contact-form-panel .form-wrapper,
.contact-form-panel .form-body {
    width: 100%;
    padding: 0;
    background: transparent !important;
}

.contact-form-panel .form-wrapper::before { display: none; }

@media (max-width: 991.98px) {
    .contact-form-visual,
    .contact-form-visual > img { min-height: 430px; }
    .contact-form-panel { padding: 40px; }
}

@media (max-width: 575.98px) {
    .contact-form-visual,
    .contact-form-panel { border-radius: 18px; }
    .contact-form-visual,
    .contact-form-visual > img { min-height: 340px; }
    .contact-visual-caption { right: 24px; bottom: 24px; left: 24px; }
    .contact-form-panel { padding: 30px 22px; }
}

@media (max-width: 767.98px) {
    .fixed-social-bar {
        top: auto;
        right: 50%;
        bottom: 12px;
        flex-direction: row;
        transform: translateX(50%);
    }

    .fixed-social-bar a {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }
}

/* Homepage "Book a Consultation" photo: the theme's style-2 content-media
   uses large negative margins designed for a decorative cutout graphic,
   which cropped/misaligned this real photograph. Reset it to sit cleanly
   inside its own column with rounded corners instead. */
.content-wrapper.style-2 .content-media.home-appointment-media {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
}
.content-wrapper.style-2 .content-media.home-appointment-media img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 20px;
}
@media (max-width: 991px) {
    .content-wrapper.style-2 .content-media.home-appointment-media img {
        height: 320px;
    }
}