/* Surya Shyam — theme overrides on temp-xi (Kailasha/Zenith family) */
.info-box .mb-ext-box h4 {
    background: #0f4c3a;
    box-shadow: none;
    border-top: 3px dashed #ffeb3b;
    border-bottom: 3px dashed #ffeb3b;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
}

.info-box .status {
    background: #368BBA;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.info-box .mb-box {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* —— Single polished brand mark (navbar + footer) —— */
.navbar-brand {
    display: flex;
    align-items: center;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    margin-right: 1rem;
    text-decoration: none !important;
}

.ss-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    line-height: 1.15;
    color: #0a1512;
    text-decoration: none !important;
}

.ss-brand-mark {
    flex: 0 0 auto;
    display: inline-flex;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.ss-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ss-brand-name {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #0a1512;
}

.ss-brand-name em {
    font-style: normal;
    color: #0f4c3a;
    position: relative;
}

.ss-brand-name em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, #f6c453, #0f4c3a);
    border-radius: 2px;
    opacity: 0.85;
}

.ss-brand-sub {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5a6b62;
    white-space: nowrap;
}

.ss-brand--footer {
    justify-content: center;
}

.ss-brand--footer .ss-brand-name {
    font-size: 1.45rem;
}

.ss-brand--compact .ss-brand-name {
    font-size: 1.1rem;
}

.ss-footer-brand {
    margin-bottom: 0.5rem;
}

@media (max-width: 991.98px) {
    .ss-brand-sub {
        display: none;
    }
    .ss-brand-name {
        font-size: 1.05rem;
    }
}

/* Connectivity list */
.ss-connectivity {
    font-size: 0.95rem;
    line-height: 1.85;
}

.ss-connectivity li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.ss-connectivity i {
    color: #0f4c3a;
    font-size: 1.15rem;
    margin-top: 2px;
}

/* Walkthrough video — vertical 9:16 phone frame (Kanvas-style) */
.reel-section {
    background: #f8f9fa;
    padding-left: 1rem;
    padding-right: 1rem;
}

.ss-reel-caption {
    color: #5a6b62;
    font-size: 0.95rem;
    margin: 0 auto;
    max-width: 28rem;
}

.ss-phone-frame {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 14px 12px 12px;
    background: linear-gradient(160deg, #123626 0%, #0a1512 55%, #0f4c3a 100%);
    border-radius: 28px;
    border: 1px solid rgba(246, 196, 83, 0.4);
    box-shadow: 0 18px 40px rgba(18, 38, 28, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ss-phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    z-index: 2;
    pointer-events: none;
}

.reel-wrapper {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 70vh;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: none;
    margin-left: auto;
    margin-right: auto;
    background: #000;
}

.reel-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

@media (min-width: 768px) {
    .ss-phone-frame {
        max-width: 380px;
    }
}

@media (min-width: 1200px) {
    .ss-phone-frame {
        max-width: 420px;
    }
}

/* Pricing card meta */
.ss-price-meta {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f4c3a;
}

.price-block h6 a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Footer SEO link grid */
.ss-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.55rem 0.9rem;
    max-width: 920px;
    margin: 1.25rem auto 0.5rem;
    padding: 0 0.75rem;
    text-align: center;
}

.ss-footer-links a {
    display: inline-block;
    color: #0f4c3a;
    font-size: 0.9rem;
    line-height: 1.35;
    text-decoration: underline;
    text-decoration-color: rgba(15, 76, 58, 0.35);
    text-underline-offset: 3px;
    padding: 0.2rem 0.15rem;
    border-bottom: 1px solid transparent;
    white-space: normal;
    word-break: break-word;
}

.ss-footer-links a:hover,
.ss-footer-links a:focus {
    color: #0a1512;
    text-decoration-color: #f6c453;
    border-bottom-color: #f6c453;
}

/* Lead form success (WhatsApp handoff) */
.enq-form.hide,
.lead-form.hide {
    display: none !important;
}

.form-success {
    display: none;
    text-align: center;
    padding: 1rem 0.5rem;
}

.form-success.show {
    display: block;
}

.form-success .tick {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: #0f4c3a;
    color: #fff;
    font-size: 1.4rem;
    line-height: 48px;
}

.field.invalid,
.iti.invalid input,
.consent-label.invalid,
.form-check.invalid {
    outline: 1px solid #c0392b;
}

/* intl-tel-input width inside template forms */
.enq-form .iti,
.lead-form .iti {
    width: 100%;
    display: block;
    margin-bottom: 0.65rem;
}

.enq-form .iti input,
.lead-form .iti input {
    width: 100%;
}

/* Hero banner: crisp AI image, phone + laptop friendly */
#mainSlider .glide__slide picture,
#mainSlider .glide__slide {
  display: block;
  width: 100%;
  height: 100%;
}
#mainSlider .hero-banner-img,
#mainSlider .glide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center; /* towers/right bias; left open for info-box */
  display: block;
}
/* —— Mobile alignment (≤750px) —— */
@media (max-width: 750px) {
    #mainSlider .hero-banner-img,
    #mainSlider .glide__slide img {
        object-position: center 35%;
        min-height: 420px;
        max-height: none;
    }
    .info-box {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        top: auto !important;
        padding: 12px 12px 18px !important;
        overflow: visible !important;
        z-index: 2;
        box-sizing: border-box;
    }

    .info-box .mb-box,
    .info-box .mb-ext-box {
        max-width: 100%;
        box-sizing: border-box;
    }

    .info-box .mb-ext-box h5 {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
        margin: 8px 0 14px !important;
        padding: 0 4px;
        word-break: break-word;
    }

    .info-box .mb-box h1 {
        font-size: 1.35rem !important;
    }

    .info-box .mb-box h2 {
        font-size: 0.95rem !important;
    }

    .info-box .mb-box h3 {
        font-size: 0.8rem !important;
        padding: 0 6px;
    }

    .banner,
    .banner .glide__slide img {
        min-height: 420px;
        max-height: none;
        object-fit: cover;
    }

    .price-slider-s-block,
    #price-slider,
    #price-slider .glide__track,
    #price-slider .glide__slides {
        overflow: visible;
        max-width: 100%;
    }

    #price-slider .glide__slide {
        height: auto;
    }

    .price-block {
        margin: 0 auto;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .price-block h5 {
        font-size: 1rem;
        line-height: 1.3;
    }

    .price-block h6 {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Keep sticky sidebars / bottom bars from covering content */
    .main,
    main,
    .pg-tabs,
    .oo-tabs {
        padding-bottom: 5.5rem;
    }

    sidebar,
    .sidebar {
        position: relative !important;
        z-index: 1;
    }

    .reel-section {
        padding-top: 2rem !important;
        padding-bottom: 2.5rem !important;
    }

    .ss-phone-frame {
        max-width: min(300px, 88vw);
        padding: 12px 10px 10px;
    }

    .reel-wrapper {
        max-height: 62vh;
    }

    .ss-footer-links {
        gap: 0.45rem 0.7rem;
        padding: 0 0.5rem;
    }

    .ss-footer-links a {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    footer .disclaimer {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        word-break: break-word;
    }
}


@media (max-width: 750px) {
    #mainSlider,
    #mainSlider .glide__track,
    #mainSlider .glide__slides,
    #mainSlider .glide__slide {
        height: auto !important;
    }
    #mainSlider .hero-banner-img,
    #mainSlider .glide__slide img,
    .banner .glide__slide img {
        width: 100% !important;
        height: 62vh !important;
        min-height: 420px !important;
        max-height: 560px !important;
        object-fit: cover !important;
        object-position: 68% 42% !important;
    }
}

/* Fixed single hero — no slider, no overlay card */
.ss-hero-fixed {
    display: block;
    width: 100%;
    overflow: hidden;
}
.ss-hero-fixed .hero-banner-img {
    width: 100%;
    height: 46vh;
    min-height: 280px;
    max-height: 520px;
    object-fit: cover;
    object-position: 68% 42%;
    display: block;
}
.ss-hero-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
#home .info-box { display: none !important; }
@media (max-width: 750px) {
    .ss-hero-fixed .hero-banner-img,
    #mainSlider.ss-hero-fixed .hero-banner-img {
        height: 62vh !important;
        min-height: 420px !important;
        max-height: 560px !important;
    }
}

/* Location map card — the base theme's .bd-img sets a fixed height:180px,
   but here it wraps a Bootstrap .ratio.ratio-16x9 map iframe whose own
   aspect-ratio height (on narrow mobile widths) is taller than 180px, so the
   map visually overflows past its box and the connectivity list below gets
   overlapped. Let this specific card size to its real content instead. */
#location .bd-img {
  height: auto;
  width: 100%;
  isolation: auto;
}
#location .bd-img::before {
  display: none;
}
/* The Google Maps embed iframe itself carries an inline min-height:280px,
   which is taller than the .ratio box (~188px on mobile) it's absolutely
   positioned inside — so the iframe still overflows past the wrapper even
   after the wrapper is height:auto. Force it to fill the ratio box exactly. */
#location .ratio iframe {
  min-height: 0 !important;
  height: 100% !important;
}