/*
 * Bangle Tiger — shared layout refinements
 * Load this stylesheet after custom.css on every page.
 *
 * Goals:
 *  - consistent, well-cropped content imagery
 *  - a shorter, more proportionate banner on inner pages
 *  - icon and text pairs aligned cleanly on one row
 */

:root {
    --home-hero-height: clamp(560px, 48vw, 720px);
    --inner-banner-height: 420px;
    --card-image-height: 260px;
    --content-image-height: 390px;
    --icon-row-gap: 12px;
}

/* Keep images responsive without stretching their natural proportions. */
img {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.hero-slider-layout,
.hero-slider-layout .swiper,
.hero-slider-layout .swiper-wrapper,
.hero-slider-layout .swiper-slide,
.hero-slider-layout .hero-slide {
    height: var(--home-hero-height);
}

.hero-slider-layout {
    overflow: hidden;
}

.hero-slider-layout .hero-slide {
    position: relative;
    display: flex;
    align-items: center;
}

.hero-slider-layout .hero-slider-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-slider-layout .hero-slider-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-slider-layout .container {
    position: relative;
    z-index: 1;
}

/*
 * Actual inner pages use the same hero markup as the homepage.  The
 * .inner-page body class lets their banner remain compact without changing
 * the home slider height.
 */
.inner-page .hero-slider-layout,
.inner-page .hero-slider-layout .swiper,
.inner-page .hero-slider-layout .swiper-wrapper,
.inner-page .hero-slider-layout .swiper-slide,
.inner-page .hero-slider-layout .hero-slide {
    height: var(--inner-banner-height) !important;
    min-height: var(--inner-banner-height) !important;
}

.inner-page .hero-slider-layout .hero-content {
    padding-block: 28px;
}

.inner-page .hero-slider-layout .hero-content .section-title {
    margin-bottom: 0;
}

.inner-page .hero-slider-layout .hero-content .section-title h3 {
    margin-bottom: 8px;
}

.inner-page .hero-slider-layout .hero-content .section-title h1 {
    /*! max-width: 900px; */
    margin-bottom: 12px;
    font-size: 30px;
    line-height: 1.08;
}

.inner-page .hero-slider-layout .hero-content .section-title p {
    max-width: 800px;
    margin-bottom: 0;
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Inner-page banners — deliberately shorter than the homepage hero
   Supports the common banner class names used across the site templates.
   -------------------------------------------------------------------------- */
.page-header,
.page-banner,
.inner-page-banner,
.inner-banner,
.breadcrumb-area,
.sub-page-banner,
.page-hero:not(.hero-slider-layout) {
    display: flex;
    align-items: center;
    min-height: var(--inner-banner-height) !important;
    height: var(--inner-banner-height) !important;
    padding-block: 0 !important;
    overflow: hidden;
    background-position: center !important;
    background-size: cover !important;
}

.page-header > .container,
.page-banner > .container,
.inner-page-banner > .container,
.inner-banner > .container,
.breadcrumb-area > .container,
.sub-page-banner > .container,
.page-hero:not(.hero-slider-layout) > .container {
    width: 100%;
}

.page-header .row,
.page-banner .row,
.inner-page-banner .row,
.inner-banner .row,
.breadcrumb-area .row,
.sub-page-banner .row,
.page-hero:not(.hero-slider-layout) .row {
    min-height: var(--inner-banner-height);
    align-items: center;
}

.page-header .breadcrumb,
.page-banner .breadcrumb,
.inner-page-banner .breadcrumb,
.inner-banner .breadcrumb,
.breadcrumb-area .breadcrumb,
.sub-page-banner .breadcrumb {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Consistent image frames
   Every image remains fully responsive; object-fit crops only inside a
   defined editorial frame so cards line up even when image source ratios vary.
   -------------------------------------------------------------------------- */
.project-image {
    height: var(--card-image-height);
    overflow: hidden;
}

.project-image figure,
.project-image .image-anime {
    height: 100%;
    margin: 0;
}

.project-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.service-tab-image,
.service-single-image,
.service-detail-image,
.service-image,
.about-image,
.about-us-image {
    height: var(--content-image-height);
    overflow: hidden;
}

.service-tab-image figure,
.service-single-image figure,
.service-detail-image figure,
.service-image figure,
.about-image figure,
.about-us-image figure,
.service-tab-image .image-anime,
.service-single-image .image-anime,
.service-detail-image .image-anime,
.service-image .image-anime,
.about-image .image-anime,
.about-us-image .image-anime {
    height: 100%;
    margin: 0;
}

.service-tab-image img,
.service-single-image img,
.service-detail-image img,
.service-image img,
.about-image img,
.about-us-image img,
.gallery-image img,
.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.gallery-image,
.gallery-item {
    overflow: hidden;
}

/* The paired images in the home About section retain a considered hierarchy. */
.features-img-1 figure {
    height: 564px;
    margin: 0;
    overflow: hidden;
}

.features-img-2 figure {
    height: 430px;
    margin: 0;
    overflow: hidden;
}

.features-img-1 img,
.features-img-2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Client marks need containment, rather than cropping. */
.mySwiper .swiper-slide,
.client-logo,
.client-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 108px;
    padding: 16px;
}

.mySwiper .swiper-slide img,
.client-logo img,
.client-image img {
    display: block;
    width: 100%;
    height: 108px;
    object-fit: contain;
    object-position: center;
    background-color: #fff;
    padding: 0;
    border: solid 1px #ccc;
}

/* --------------------------------------------------------------------------
   Icon + text alignment
   flex keeps the icon and its associated copy on the same horizontal row,
   while allowing long addresses and email addresses to wrap inside the text.
   -------------------------------------------------------------------------- */
.header-contact-btn .btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.header-contact-btn .btn-phone img {
    display: block;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.header-contact-box,
.footer-contact-item,
.contact-info-item,
.contact-detail-item,
.contact-info .contact-item,
.contact-us .contact-item,
.contact-details .contact-item {
    display: flex;
    align-items: center;
    gap: var(--icon-row-gap);
}

.header-contact-box .icon-box,
.footer-contact-item .icon-box,
.contact-info-item > .icon-box,
.contact-detail-item > .icon-box,
.contact-info .contact-item > .icon-box,
.contact-us .contact-item > .icon-box,
.contact-details .contact-item > .icon-box {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
}

.header-contact-box .icon-box img,
.footer-contact-item .icon-box img,
.contact-info-item > .icon-box img,
.contact-detail-item > .icon-box img,
.contact-info .contact-item > .icon-box img,
.contact-us .contact-item > .icon-box img,
.contact-details .contact-item > .icon-box img {
    display: block;
    width: 21px;
    height: 21px;
    object-fit: contain;
}

.header-contact-box-content,
.footer-contact-content,
.contact-info-item > :last-child:not(.icon-box),
.contact-detail-item > :last-child:not(.icon-box),
.contact-info .contact-item > :last-child:not(.icon-box),
.contact-us .contact-item > :last-child:not(.icon-box),
.contact-details .contact-item > :last-child:not(.icon-box) {
    flex: 1 1 auto;
    min-width: 0;
}

.header-contact-box-content h3,
.header-contact-box-content p,
.footer-contact-content p {
    margin-top: 0;
}

.footer-contact-content p {
    margin-bottom: 0;
}

/* Icons and labels in the service tabs stay side by side at all widths. */
.our-service-nav .nav-link {
    display: flex !important;
    align-items: center;
    gap: var(--icon-row-gap);
    text-align: left;
}

.our-service-nav .nav-link img {
    display: block;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin: 0;
    object-fit: contain;
}

/* The service ticker uses the same baseline alignment. */
.scrolling-content span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.scrolling-content span img {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    :root {
        --card-image-height: 250px;
        --content-image-height: 340px;
    }

    .features-img-1 figure {
        height: 310px;
    }

    .features-img-2 figure {
        height: 210px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --home-hero-height: 600px;
        --inner-banner-height: 300px;
        --card-image-height: 245px;
        --content-image-height: 285px;
        --icon-row-gap: 10px;
    }

    .hero-slider-layout .hero-content {
        padding-block: 72px;
    }

    /* Override the home-slider spacing above for compact inner banners. */
    .inner-page .hero-slider-layout .hero-content {
        padding-block: 20px;
    }

    .inner-page .hero-slider-layout .hero-content .section-title h3 {
        margin-bottom: 6px;
    }

    .inner-page .hero-slider-layout .hero-content .section-title h1 {
        margin-bottom: 8px;
        font-size: clamp(2rem, 9vw, 2.65rem);
        line-height: 1.05;
    }

    .inner-page .hero-slider-layout .hero-content .section-title p {
        font-size: 0.9rem;
        line-height: 1.38;
    }

    .page-header,
    .page-banner,
    .inner-page-banner,
    .inner-banner,
    .breadcrumb-area,
    .sub-page-banner,
    .page-hero:not(.hero-slider-layout) {
        min-height: var(--inner-banner-height) !important;
        height: var(--inner-banner-height) !important;
    }

    .features-img-1 figure {
        height: 255px;
    }

    .features-img-2 figure {
        height: 175px;
    }

    .mySwiper .swiper-slide,
    .client-logo,
    .client-image {
        height: 92px;
        padding: 12px;
    }

    .mySwiper .swiper-slide img,
    .client-logo img,
    .client-image img {
        height: 139px;
    }

    .header-contact-box,
    .footer-contact-item,
    .contact-info-item,
    .contact-detail-item,
    .contact-info .contact-item,
    .contact-us .contact-item,
    .contact-details .contact-item {
        align-items: flex-start;
    }

    .header-contact-box .icon-box,
    .footer-contact-item .icon-box,
    .contact-info-item > .icon-box,
    .contact-detail-item > .icon-box,
    .contact-info .contact-item > .icon-box,
    .contact-us .contact-item > .icon-box,
    .contact-details .contact-item > .icon-box {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }
}