/*
    Infographics listing page (infographics.php)
    Matches the "newdesign" theme used by blogs.php / articles.php.
*/

.h-260 {
    height: 260px;
}

/* .webinar_libary_card / .webinar_libary_card_btm chrome come from the shared
   newdesign/assets/css/customstyles.css — only the hover reveal is page-local. */
.webinar_libary_card {
    position: relative;
    overflow: hidden;
}
.webinar_libary_card .hover-btn {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.webinar_libary_card:hover .hover-btn {
    opacity: 1;
}

/* Each card's industry icon comes from an admin-uploaded file with no
   consistent dimensions — pin them all to the same box so the row of
   icons under the cards lines up instead of jumping around per-icon. */
.category-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Category filter pills ───────────────────────────────────────── */
.category-pills {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.category-pill {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 30px;
    border: 1px solid #d7e0e0;
    color: #46545c;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: #fff;
    transition: all 0.2s ease;
}
.category-pill:hover {
    border-color: #16484b;
    color: #16484b;
    text-decoration: none;
}
.category-pill.active {
    background: #16484b;
    border-color: #16484b;
    color: #fff;
}

/* ── Search bar ──────────────────────────────────────────────────── */
.search-bar .form-control {
    font-size: 14px;
}
.search-btn {
    padding: 0 16px;
    font-size: 14px;
}

/* "Our Clients" uses the shared .logo-carousel / .carousal-slide / .client_logo
   marquee classes from newdesign/assets/css/customstyles.css (same pattern as
   index.php) — the default 10s lap is tuned for a full-width band, so this
   sidebar copy (narrower, read at a glance) gets a slower lap of its own. */
.logo-carousel--slow .carousal-slide {
    animation-duration: 35s;
}
/* Shared rule only constrains height (width: auto) — a wide logo and a
   narrow one then take up very different footprints, so the row reads as
   "some big, some small" even though the height matches. Give every logo
   the same fixed-size box and let it scale down to fit inside without
   distorting (object-fit: contain), so the whole row is visually even. */
.logo-carousel--tall {
    padding: 16px 0;
}
.logo-carousel--tall .client_logo {
    width: 110px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-carousel--tall .client_logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ── Enquiry form ────────────────────────────────────────────────── */
.enquiry-card-header {
    background: #16484b;
    color: #fff;
    padding: 16px 20px;
}
.enquiry-card-header p {
    color: rgba(255, 255, 255, .85);
}
.customButton {
    background: #16484b;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 10px 26px;
    font-weight: 600;
}
.customButton:hover {
    background: #0f3335;
    color: #fff;
}
.eform {
    font-size: 13px;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top: 4px solid #16484b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Scroll-in animations (same pattern as blogs.php) ───────────── */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.7s ease;
}
.scroll-animate.show {
    opacity: 1;
    transform: translateY(0);
}
.fade-slide {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-slide.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-delay-1 { transition-delay: 0.1s; }

/* ── Form validation ─────────────────────────────────────────────── */
.field-error {
    display: none;
    color: #dc3545;
    font-size: .82rem;
    text-align: left;
    margin: 4px 0 0;
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
}

/* ── Toast Notifications (matches index.php's form-submit toast) ── */
.form-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    z-index: 99999;
    max-width: 380px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
}
.form-toast--show {
    opacity: 1;
    transform: translateY(0);
}
.form-toast--success {
    background: #1a7f4b;
}
.form-toast--error {
    background: #c0392b;
}
.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.input-group>.form-control, .input-group>.form-floating, .input-group>.form-select {
    position: relative;
    flex: 1 1 auto;
    width: 80% !important;
    min-width: 0;
}