/* Specicast bridge stylesheet.
   Keeps existing dynamic front components (which use a common
   "section-title / section-sub-title / text-anime-style-3" markup
   convention) styled consistently on top of the new theme's design
   tokens, without editing the theme's own vendor CSS files. */

/* contact-us page: theme's .rs-contact-seven .rs-contact-form uses a
   large negative bottom margin (main.css) expecting another section
   below it to absorb the overlap and let the card "float" onto it.
   Our contact page ends with this section right before the footer, so
   the negative margin was pulling the footer up over the form and
   clipping the submit button/recaptcha. Neutralize it here. */
.rs-contact-form-area.rs-contact-seven .rs-contact-form {
    margin-bottom: 0;
}

/* about-us page "Why Choose Us" section: .rs-about-thumb below carries the
   theme's -25px margin-top, tuned for the shorter demo copy. Our 4-item
   feature list makes the text column taller, so that pull-up now clips
   into the last list item instead of just tightening whitespace. */
.rs-about-one .rs-work-step-item-body-list {
    padding-bottom: 40px;
}

:root {
    /* aliases so existing component <style> blocks (export-highlight,
       quick-inquiry, etc.) keep working unchanged against theme tokens */
    --primary-color: var(--rs-theme-orange);
    --secondary-color: var(--rs-bg-primary);
    --accent-color: var(--rs-theme-orange);
    --divider-color: var(--rs-border-primary);
    --text-color: var(--rs-text-primary);
    --white-color: var(--rs-white);
}

/* ===== Generic section spacing used by dynamic components ===== */
.our-projects,
.our-faqs,
.our-testimonials,
.our-impact-prime,
.our-services-prime,
.our-approach,
.what-we-do,
.about-us,
.blog-section,
.client-section,
.quick-inquiry-section,
.export-highlight-section,
.dsn-testimonials {
    padding: 90px 0;
}

.dark-section {
    background-color: var(--rs-black);
    color: var(--rs-white);
}

.dark-section .section-sub-title,
.dark-section p {
    color: rgba(255, 255, 255, 0.75);
}

.light-section {
    background-color: var(--rs-bg-primary);
}

/* ===== Section title convention ===== */
.section-row,
.section-title {
    margin-bottom: 40px;
}

.section-title-center {
    text-align: center;
}

.section-title-center .section-sub-title {
    justify-content: center;
}

.section-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--rs-theme-orange);
    margin-bottom: 14px;
}

.section-title h2.text-anime-style-3,
h2.text-anime-style-3 {
    font-family: var(--rs-ff-title);
    font-size: clamp(28px, 3.2vw, var(--rs-fs-h2));
    font-weight: var(--rs-fw-sbold);
    line-height: 1.2;
    color: var(--rs-title-primary);
    margin: 0 0 16px;
}

.dark-section h2.text-anime-style-3 {
    color: var(--rs-white);
}

/* ===== Buttons kept from old theme markup ===== */
.btn-default {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 50px;
    background: var(--rs-theme-orange);
    color: var(--rs-white) !important;
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: all 0.3s ease;
}

.btn-default:hover {
    background: var(--rs-black);
    color: var(--rs-white) !important;
}

/* ===== Page header / breadcrumb =====
   The theme's own breadcrumb-bg-01.png (and every other footer/breadcrumb
   background PNG its demo pages reference) is missing from this asset
   package, so the white breadcrumb title text has no dark backdrop to
   sit on. Give it one directly instead of depending on a missing image. */
.rs-breadcrumb-area {
    background: radial-gradient(circle at 15% 30%, rgba(234, 85, 1, 0.35) 0%, transparent 55%), var(--rs-black);
}

.rs-breadcrumb-menu nav ul li a,
.rs-breadcrumb-menu nav ul li span {
    color: rgba(255, 255, 255, 0.75);
}

.rs-breadcrumb-menu nav ul li a:hover {
    color: var(--rs-theme-orange);
}

/* ===== Image reveal / swiper card polish ===== */
.image-anime {
    overflow: hidden;
    display: block;
    margin: 0;
}

.image-anime img {
    width: 100%;
    display: block;
}

/* Reserve card height before the image loads, so the page doesn't
   jump/overlap the next section (e.g. CTA) while images are loading */
.rs-portfolio-thumb .image-anime {
    aspect-ratio: 4 / 3;
}

.rs-portfolio-thumb .image-anime img {
    height: 100%;
    object-fit: cover;
}

/* Industries page (/industry): uploaded industry photos come in mixed
   aspect ratios (e.g. portrait vs landscape), which made cards render
   at different heights. Force a consistent 4:3 crop so every card matches. */
.rs-services-area .rs-services-thumb .image-anime {
    aspect-ratio: 4 / 3;
}

.rs-services-area .rs-services-thumb .image-anime img {
    height: 100%;
    object-fit: cover;
}

/* Featured Products (home): the card's collapsed "peek" state only has
   room for one line of title before the image edge clips it. Real product
   names run longer than the theme's demo text and were getting cropped
   mid-word (e.g. "...Valve Bod"). Clamp to one line + ellipsis instead. */
.rs-portfolio-one .rs-portfolio-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* This section's cards are shorter than the theme default, so the tag+title
   "peek" (normally bottom:-90px, revealed fully on hover) left only a sliver
   of the title visible at rest -- unreadable, and permanently so on touch
   devices with no hover. Shrink the offset so tag+title sit fully in frame
   without needing hover. */
.rs-featured-products .rs-portfolio-content {
    bottom: -40px;
}

/* Footer "Pages" / "Products" link columns: the theme gives li items no
   vertical gap, so the links read as one cramped block. Add breathing room
   between each link. */
.rs-footer-widget-links ul li {
    margin-bottom: 8px;
}

.rs-footer-widget-links ul li:last-child {
    margin-bottom: 0;
}

/* Product/category/blog card titles (.underline.has-white): the theme's
   own rule keeps this text white on hover, which reads as "no hover state"
   on dark card backgrounds. Switch it to the theme orange on hover. */
.underline.has-white a:hover {
    color: var(--rs-theme-orange);
}

/* Similar Products (product detail page): always 3 cards side by side,
   never wraps to a new row and never scrolls. */
.similar-products-row {
    flex-wrap: nowrap;
}

.similar-products-row > [class*="col-"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

@media (max-width: 767px) {
    .similar-products-row > [class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
    }

    .similar-products-row .rs-portfolio-title {
        font-size: 14px;
    }
}

/* Review/testimonial cards: force equal height across a slide row and
   pin the star rating to the bottom regardless of description length. */
.review-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.review-swiper .rs-testimonial-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.review-swiper .rs-testimonial-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.review-swiper .rs-testimonial-description {
    flex: 1;
}

.review-swiper .rs-testimonial-rating-wrapper {
    margin-top: auto;
}

/* ===== Header: center the main nav menu between the logo and the
   Get In Touch/hamburger group. The theme's default (main.css) only
   pushes .rs-header-menu left via margin-inline-end:auto, which keeps
   it hugging the logo instead of sitting centered in the header. */
.rs-header-one .rs-header-menu {
    margin-inline: auto;
    justify-content: center;
}

/* ===== Footer contact info: icons + spacing ===== */
.rs-footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    margin: 0;
}

.rs-footer-contact-list li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    list-style: none;
}

.rs-footer-contact-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 85, 1, 0.12);
    color: var(--rs-theme-orange);
    font-size: 14px;
}

.rs-footer-contact-list li a {
    color: var(--rs-text-secondary);
    font-weight: 500;
    line-height: 1.6;
    transition: 0.3s ease;
    padding-top: 8px;
}

.rs-footer-contact-list li a:hover {
    color: var(--rs-theme-orange);
}

@media (max-width: 575px) {
    .rs-footer-contact-list {
        gap: 16px;
    }
}