.tp-header-logo a {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tp-header-logo img {
    width: 100px;
}
.tp-header-logo h1 {
    color: var(--tp-common-white);
    font-weight: bold;
    font-size: 42px;
}
.tp-header-logo h1 span {
    display: block;
    font-size: 24px;
}

.tp-header-bottom img {
    width: 80px;
}

.tp-header-bottom h1 {
    color: var(--tp-common-white);
    font-weight: bold;
    font-size: 32px;
}
.tp-header-bottom h1 span {
    display: block;
    font-size: 22px;
}
.tp-header-bottom .logo a {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tp-header-sticky .main-menu ul li > a {
    padding: 10px 15px;
    border-radius: 5px;
}
.tp-testimonial-active {
    padding: 0 10px;
}
.tp-instagram-thumb > img {
    height: 225px;
    object-fit: cover;
    object-position: center center;
}
.swiper-pagination-bullets {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}
.swiper-pagination-bullet {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    opacity: 1;
    margin: 0 7px;
    background-color: var(--tp-theme-primary);
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--tp-theme-primary);
    position: relative;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--tp-red-1);
    border-radius: 50%;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}
.tp-doctor-wrapper {
    position: relative;
}
.tp-testimonial-wrapper {
    position: relative;
    padding-bottom: 50px;
}

.swiper-container button {
    position: absolute;
    left: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    font-size: 20px;
    color: var(--tp-theme-4);
    height: 50px;
    width: 50px;
    display: inline-block;
    border-radius: 50%;
    background-color: var(--tp-common-white);
}
.tp-services-3-thumb .fix > img {
    height: 300px;
    object-fit: cover;
    object-position: top center;
}

.swiper-container button:hover {
    background: var(--tp-theme-primary);
    border-color: var(--tp-theme-primary);
    color: var(--tp-common-white);
    box-shadow: inset 0 0 0 40px var(--tp-theme-primary);
}
.tp-testimonial-wrapper.inner-page .tp-testimonial-item {
    margin-bottom: 30px;
}
.tp-team-content .time {
    display: block;
    font-size: 14px;
    color: var(--tp-theme-4);
    line-height: 21px;
}
.tp-services-details-wrapper strong {
    color: var(--tp-theme-primary);
}
.tp-services-details-wrapper p {
    color: #000;
    font-size: 16px;
    line-height: 28px;
}
.tp-services-details-wrapper li {
    margin-bottom: 10px;
    color: #000;
    font-size: 16px;
    line-height: 28px;
}
@media (max-width: 767px) {
    .swiper-container button svg {
        width: 25px;
    }
    .banner1text h1{
    font-size: 45px!important;
    width: 100%;
}
}
.swiper-container .next-btn {
    left: auto;
    right: 0px;
}
@media (max-width: 767px) {
    .swiper-container .next-btn {
        right: 10px;
    }
}
@media (max-width: 767px) {
    .swiper-container button {
        left: 10px;
    }
}
.tp-services-wrapper .swiper-container {
    padding-bottom: 50px;
}

.doctor-list ul {
    width: 100%;
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
}
.doctor-list ul li {
    list-style: none;
    display: inline-block;
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: table;
    padding: 25px 20px;
    position: relative;
    background-color: #ffffff;
    display: flex;
    align-items: flex-start;
}
.doctor-list ul li .icon-wrap {
    z-index: 1;
    width: 80px;
    height: 60px;
    margin: 20px 0;
    flex-shrink: 0;
    position: relative;
    border-radius: 5px;
    text-align: center;
    margin-right: 20px;
    font-size: 36px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--tp-red-1);
    border-left: 3px solid var(--tp-red-1);
    border-right: 3px solid var(--tp-red-1);
}
.doctor-list ul li .icon-wrap::after {
    content: "";
    left: -59px;
    width: 51px;
    z-index: -1;
    height: 51px;
    bottom: -22px;
    position: absolute;
    border-radius: 8px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--tp-red-1);
    border-right: 3px solid var(--tp-red-1);
    border-bottom: 3px solid var(--tp-red-1);
    -webkit-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg);
    -ms-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg);
    transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg);
}
.doctor-list ul li .icon-wrap::before {
    top: -22px;
    left: -59px;
    width: 51px;
    content: "";
    z-index: -1;
    height: 51px;
    position: absolute;
    border-radius: 8px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--tp-red-1);
    border-top: 3px solid var(--tp-red-1);
    border-left: 3px solid var(--tp-red-1);
    -webkit-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg);
    -ms-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg);
    transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg);
}
.doctor-list ul li .icon-wrap i {
    font-size: 48px;
    line-height: 66px;
    background: var(--tp-common-white);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.doctor-list .info-wrap strong {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: var(--tp-red-1);
}
.doctor-list .info-wrap small {
    display: block;
    font-size: 16px;
    color: var(--tp-theme-primary);
    line-height: normal;
    margin-top: 5px;
}

.doctor-list .info-wrap .time {
    font-size: 13px;
    line-height: normal;
}
.about-area img {
    max-width: 100%;
}
.about-area figcaption {
    background: var(--tp-theme-primary);
    color: var(--tp-common-white);
    text-align: center;
    padding: 15px;
    display: block;
    font-weight: bold;
    font-size: 20px;
}
.tp-slider-btn-2-arrow {
    right: auto;
}
.tp-slider-3-thumb {
    text-align: center;
}
.tp-slider-3-thumb img {
    width: 400px;
    max-width: 100%;
    margin: 40px auto 0;
}
.tp-slider-3-item {
    height: 640px;
}
@media (max-width: 767px) {
    .swiper-container button {
        height: 50px;
        width: 50px;
    }
    .doctor-list ul {
        grid-template-columns: repeat(1, 1fr);
    }
    .tp-slider-3-title-1 {
        font-size: 21px;
    }
    .tp-slider-3-content p {
        font-size: 18px;
        line-height: 28px;
    }
    .tp-slider-3-content {
        min-height: auto;
    }
    .tp-slider-3-thumb img {
        margin-top: 0;
    }
    .tp-slider-3-item {
        height: 100vh;
        min-height: 700px;
    }
    .tp-header-logo img {
        width: 86px;
    }
    .offcanvas__logo img,
    .tp-header-bottom img {
        width: 72px;
    }
    .about-area figcaption {
        font-size: 14px;
        padding: 10px 5px;
    }
    .tp-breadcrumb-bg {
        padding: 60px 0;
    }
    .tp-services-details-wrapper ul {
        padding-left: 10px;
    }
    .doctor-list ul li {
        padding: 25px 15px;
    }
    .tp-testimonial-item {
        padding: 25px 25px 37px;
    }
    .tp-contact-inner {
        margin-bottom: 30px;
    }
}


.banner1text h1{
    font-size: 50px;
    width: 80%;
    font-weight: 800;
    padding-top: 35px;
    padding-bottom: 55px;
    text-shadow: 0 0 5px #00000055;
    color:#ffffff;
    margin: auto;
}

.sticky-contact {
  position: fixed;
  left: 15px;
  top: 70%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 9999;
}

.contact-icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: 0.3s ease;
  animation: float 2s infinite ease-in-out;
}

.contact-icon:hover {
  transform: scale(1.1);
}

.call { background: #0d6efd; }
.email { background: #841618; }
.whatsapp { background: #25D366; }

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   "Why Choose" desktop hover — desktop only
   On hover: icon + title slide away, grey content appears.
   This restores the original theme behaviour while ensuring
   touch/mobile devices are never affected.
   ═══════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
    .tp-services-wrap .tp-services-item-box:hover .tp-services-item-box-icon span {
        transform: scale(0);
        opacity: 0;
    }
    .tp-services-wrap .tp-services-item-box:hover .tp-services-item-box-title {
        transform: translateY(-66px);
    }
    .tp-services-wrap .tp-services-item-box:hover .tp-services-item-box-content {
        bottom: 20px;
        opacity: 1;
        visibility: visible;
        transition-delay: 0.1s;
    }
}

/* ═══════════════════════════════════════════════════
   SPEED: Contain layout for heavy repeating sections
   ═══════════════════════════════════════════════════ */
.tp-instagram-item,
.tp-testimonial-item {
    contain: layout style;
}

/* ═══════════════════════════════════════════════════
   Contact form AJAX response message styling
   ═══════════════════════════════════════════════════ */
.ajax-response {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 6px;
    padding: 0;
    display: block;
    min-height: 0;
}
.ajax-response.success {
    color: #18622e;
    background: #eaf5ee;
    border-left: 4px solid #18622e;
    padding: 12px 16px;
}
.ajax-response.error {
    color: #d71920;
    background: #fef0f0;
    border-left: 4px solid #d71920;
    padding: 12px 16px;
}

/* ═══════════════════════════════════════════════════
   FIX: tp-about-list li — theme sets display:flex +
   text-align:justify which scatters inline children
   (strong, a, Devanagari) across visual columns.
   Override to block with absolute icon positioning.
   ═══════════════════════════════════════════════════ */
.tp-about-list ul li {
    display: block !important;
    text-align: left !important;
    padding-left: 26px;
    position: relative;
    margin-bottom: 14px;
    line-height: 1.75;
}
.tp-about-list ul li > i.fa-circle-check {
    position: absolute;
    left: 0;
    top: 4px;
    margin-right: 0;
    flex: none;
}

/* ═══════════════════════════════════════════════════
   FIX: Mobile — paired buttons merging without space.
   On phones the two-button rows (hero "Contact Now" +
   "View More", about "Contact Us Today" + "Call Now")
   wrapped and touched. Use flex + gap so spacing is
   consistent whether the buttons sit side-by-side or
   wrap to two lines. Desktop is untouched.
   ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .tp-slider-3-btn,
    .tp-about-btn {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
    }
    .tp-slider-3-btn.tp-slider-3-btn--center {
        justify-content: center;
    }
    /* gap handles spacing — clear the old margin so it isn't doubled */
    .tp-slider-3-btn .tp-btn-2,
    .tp-about-btn .tp-btn {
        margin-right: 0;
    }
}

/* ===========================================================================
   Hero never-blank safety net
   The hero slides use white text over a background image that is applied via
   JS (data-background). Give the slider a brand-green fallback colour so that,
   even if the image is still downloading or JS is delayed, the white headline
   stays readable instead of showing white-on-white (a "blank hero").
   The real background image paints over this the moment it is ready.
   =========================================================================== */
.tp-slider-3-item,
.tp-slider-3-active .swiper-slide {
  background-color: #18622e;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ===========================================================================
   NO-BLANK GUARANTEE — entrance animations disabled (root-cause fix)
   The template's .wow entrance animations (fadeInLeft / fadeInRight / zoomIn /
   slideIn…) each START the element at opacity:0 and take up to ~1s to animate
   in. On any section with a solid/coloured background — most visibly the green
   footer (.theme-bg) and the CTA strip — that 1-second window reads as an
   EMPTY coloured band that "loads in late". This was the repeatedly-reported
   issue. We force every animated element to be fully visible and static from
   the very first paint. The site looks identical once loaded; the only
   difference is that elements no longer fade/zoom in.
   =========================================================================== */
.wow {
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-animation: none !important;
          animation: none !important;
  -webkit-transform: none !important;
          transform: none !important;
}

/* ---------------------------------------------------------------------------
   Background-image section fallbacks
   These section strips get their background IMAGE applied by JS at runtime
   (data-background). Until that image is fetched they would otherwise paint as
   an empty strip — and they carry light/white text, so an empty strip looks
   broken. Give each a brand-green fill so the strip is visually complete the
   instant it paints, with the photo layering on top once loaded. (The hero
   .tp-slider-3-item already has this fallback above.)
   --------------------------------------------------------------------------- */
.tp-breadcrumb-bg,
.tp-feature-bg,
.tp-cta-2-bg {
  background-color: #18622e;
}

/* ---------------------------------------------------------------------------
   Gallery ("Photo Gallery") heading visibility.
   The gallery section's heading text is WHITE and is designed to sit on the
   green band painted by `.tp-instagram-bg::before` (a 350px tall strip set with
   `z-index: -1`). Because `.tp-instagram-bg` is only `position: relative` (not a
   stacking context), that negative-z band escapes to the root and can be painted
   over by the page/root layers — leaving white text on a white page (invisible).
   `isolation: isolate` makes the section its own stacking context, so the band
   paints directly behind its own heading and is always visible. Look is
   unchanged: the band stays 350px, the carousel still renders above it.
   --------------------------------------------------------------------------- */
.tp-instagram-bg {
  isolation: isolate;
}

/* ---------------------------------------------------------------------------
   Remove the white strip at the extreme bottom edge of every page.
   ROOT CAUSE: the off-canvas mobile menu (.offcanvas__area) is 450px wide and
   parked OFF-SCREEN to the right via transform: translateX(calc(100% + 80px)).
   That off-screen panel widens the document, so the browser shows a horizontal
   SCROLLBAR along the bottom — the thin full-width strip in the report (the
   little mark on its left is the scrollbar's arrow button). It is in the shared
   header, so it shows on all pages, and no background colour can cover a
   scrollbar track. Fix: clip horizontal overflow at the root. This is the
   standard, intended fix for off-canvas panels and clips nothing visible
   (everything real fits within the viewport width; only the parked panel and
   any few-px decorative overhangs are clipped). The panel still slides in
   normally when opened (it animates to translateX(0), inside the viewport).
   `overflow-x: clip` is used where supported (no side effects); `hidden` is the
   fallback for older browsers.
   --------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}