/* ============================================================
   TekBis — Global Button Hover Effects
   Applied site-wide via <link> in every HTML page
   ============================================================ */

/* ---- Shared transition base for all buttons ---- */
.btn-primary,
.btn-secondary,
.btn-primary-outline,
.btn-secondary-outline,
a[class*="btn-"],
button[class*="btn-"] {
    transition: background-color 0.28s ease, color 0.28s ease,
                border-color 0.28s ease, box-shadow 0.28s ease,
                transform 0.18s ease !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ============================================================
   btn-primary  (Red bg #d1202d, white text)
   Hover → darker red + lift shadow
   ============================================================ */
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: #a8111c !important;
    border-color: #a8111c !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(209, 32, 45, 0.40) !important;
    transform: translateY(-2px) !important;
}
.btn-primary:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(209, 32, 45, 0.30) !important;
}

/* ============================================================
   btn-secondary  (White bg, red text #d1202d)
   Hover → Red bg, white text (inverted)
   ============================================================ */
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: #d1202d !important;
    border-color: #d1202d !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(209, 32, 45, 0.35) !important;
    transform: translateY(-2px) !important;
}
.btn-secondary:active {
    transform: translateY(0px) !important;
    box-shadow: none !important;
}

/* ============================================================
   btn-primary-outline  (Transparent bg, red border/text)
   Hover → Red fill (already has :hover but we enhance it)
   ============================================================ */
.btn-primary-outline:hover,
.btn-primary-outline:focus-visible {
    background-color: #d1202d !important;
    color: #fff !important;
    border-color: #d1202d !important;
    box-shadow: 0 6px 20px rgba(209, 32, 45, 0.35) !important;
    transform: translateY(-2px) !important;
}
.btn-primary-outline:active {
    transform: translateY(0px) !important;
}

/* ============================================================
   btn-secondary-outline  (Transparent bg, white border/text)
   Hover → White fill, red text
   ============================================================ */
.btn-secondary-outline:hover,
.btn-secondary-outline:focus-visible {
    background-color: #fff !important;
    color: #d1202d !important;
    border-color: #fff !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px) !important;
}
.btn-secondary-outline:active {
    transform: translateY(0px) !important;
}

/* ============================================================
   Hero / Contact form Submit button
   (Usually .btn-primary inside a form)
   ============================================================ */
.hero-form button[type="submit"]:hover,
form button[type="submit"].btn-primary:hover {
    background-color: #a8111c !important;
    border-color: #a8111c !important;
    box-shadow: 0 6px 20px rgba(209, 32, 45, 0.40) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   Nav CTA button (Get a Proposal / Contact Us in navbar)
   ============================================================ */
.tekbis-nav__wrapper--right .btn-primary:hover,
.navbar .btn-primary:hover {
    background-color: #a8111c !important;
    border-color: #a8111c !important;
    box-shadow: 0 4px 14px rgba(209, 32, 45, 0.45) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   "Find Us" card action buttons (arrow style, transparent bg)
   ============================================================ */
.home-find-us__wrapper--cards-cardcontentbtn:hover,
.home-findus-mobile__wrapper--cards-cardcontentbtn:hover {
    color: #d1202d !important;
    letter-spacing: 0.5px;
}
.home-find-us__wrapper--cards-cardcontentbtn:hover .btn-icon,
.home-findus-mobile__wrapper--cards-cardcontentbtn:hover .btn-icon {
    transform: translateX(6px) !important;
}
.home-find-us__wrapper--cards-cardcontentbtn .btn-icon,
.home-findus-mobile__wrapper--cards-cardcontentbtn .btn-icon {
    transition: transform 0.25s ease !important;
}

/* ============================================================
   Portfolio / Services "Explore" link-style buttons
   ============================================================ */
.home-portfolio__wrapper--left-btn:hover,
.home-portfolio__wrapper--left-btn:focus-visible {
    background-color: #d1202d !important;
    color: #fff !important;
    border-color: #d1202d !important;
    box-shadow: 0 6px 20px rgba(209, 32, 45, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   Footer social icon links — subtle glow on hover
   ============================================================ */
.tekbis-footer__wrapper--content-bottomicons a:hover img,
.social-icon:hover img {
    filter: brightness(0.8) saturate(1.5);
    transform: scale(1.15);
    transition: transform 0.2s ease, filter 0.2s ease;
}
.tekbis-footer__wrapper--content-bottomicons a img,
.social-icon img {
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* ============================================================
   Floating social sidebar icons
   ============================================================ */
.floating-social-icons a:hover,
.social-icon.instagram:hover,
.social-icon.facebook:hover,
.social-icon.linkedin:hover {
    transform: scale(1.12) !important;
    transition: transform 0.2s ease !important;
}

/* ============================================================
   General anchor-styled CTA buttons across service pages
   ============================================================ */
a.btn-primary:hover,
a.btn-secondary:hover {
    text-decoration: none !important;
}

/* ============================================================
   Portfolio Page — Project Cards
   Unified brand-matching background + hover blur + clear text
   ============================================================ */

/* --- Normal State: Sabhi cards ka ek jesa brand-matching background --- */
.portfolio .project-container {
    background-color: #FFF0F1 !important; /* Light rose — TekBis red (#d1202d) se match karta */
    transition:
        background-color 0.40s ease,
        transform       0.30s ease,
        box-shadow      0.30s ease !important;
    box-shadow: 0 4px 18px rgba(209, 32, 45, 0.08) !important;
}

/* --- Normal State: Title & category text styling --- */
.portfolio .project-container h3 {
    color: #1c1c1c !important;
    transition: color 0.35s ease !important;
}
.portfolio .project-container > p {
    color: #7a4046 !important;
    transition: color 0.35s ease !important;
}

/* --- Image smooth transition --- */
.portfolio .project-container .project-image {
    transition: opacity 0.40s ease, filter 0.40s ease !important;
    filter: none !important;
}

/* ---- HOVER STATE ---- */

/* Card background: same color, slightly darkened — NO red added */
.portfolio .project-container:hover {
    filter: brightness(0.88) !important;
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
}

/* Image: blur + fade so text is clearly visible */
.portfolio .project-container:hover .project-image {
    opacity: 0.12 !important;
    filter: blur(5px) brightness(0.6) !important;
}

/* Title on hover: dark, clearly visible (background is light) */
.portfolio .project-container:hover h3 {
    color: #111111 !important;
    text-shadow: none !important;
}

/* Category tags on hover: same dark color */
.portfolio .project-container:hover > p {
    color: #333333 !important;
    text-shadow: none !important;
}

/* Hover overlay div: centered properly */
.portfolio .project-container .hover-effects {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 85% !important;
    text-align: center !important;
    opacity: 0 !important;
    transition: opacity 0.40s ease !important;
}

/* Show overlay on hover */
.portfolio .project-container:hover .hover-effects {
    opacity: 1 !important;
}

/* Project description text in overlay: dark pill badge (bg is light) */
.portfolio .project-container .project-details {
    color: #111111 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    padding: 10px 18px !important;
    border-radius: 50px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: inline-block !important;
    letter-spacing: 0.3px !important;
    text-shadow: none !important;
}

@media (min-width: 1024px) {
    .portfolio .project-container .project-details {
        font-size: 18px !important;
        padding: 14px 28px !important;
    }
}