/*==========================================================================
  Izobrazevanja — Gutenberg Bridge CSS
  Maps native Gutenberg block output classes to existing visual styles.
  Each section is scoped under its pattern wrapper class.

  Load order: iz-components → iz-gutenberg-bridge → iz-overrides
==========================================================================*/

/* ==========================================================================
   GLOBAL — prevent horizontal scrollbar from 100vw pseudo-element backgrounds
   ========================================================================== */
body {
    overflow-x: clip;
    background-color: var(--white-color);
}

/* ==========================================================================
   SHORTCODE OUTPUT — exempt from WP constrained layout
   WordPress adds is-layout-constrained to post-content which forces
   max-width on all direct children. Shortcode wrappers need full width.
   ========================================================================== */

/* WP constrained layout uses theme.json contentSize/wideSize to cap block widths.
   theme.json now uses Kadence's CSS variables (var(--global-calc-content-width))
   which Kadence sets based on Customizer "Content Max Width".
   Kadence rowlayout blocks with align:full break out of the constraint.
   For blocks without align:full (our patterns), override the constraint. */
.is-layout-constrained > .wp-block-kadence-rowlayout,
.is-layout-constrained > [data-align="full"],
.is-layout-constrained > .alignfull {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   SECTION HEADINGS — Kadence advancedheading blocks with iz- classes
   Maps iz-section-eyebrow → .sub-title and iz-section-title → .h2-title
   so section headings are editable in Gutenberg but styled like reference.
   ========================================================================== */

/* ==========================================================================
   FOOTER CTA — Kadence rowlayout with orange gradient background
   Maps .iz-footer-cta to .apply-now-sec visual appearance.
   ========================================================================== */

.iz-footer-cta {
    position: relative;
    background: var(--gradient-color);
    border-radius: 20px;
    padding: 0px !important;
    overflow: hidden;
    margin: 40px auto !important;
    max-width: 1320px !important;
}

.iz-footer-cta .kt-row-column-wrap {
    align-items: center;
    padding-bottom: 0 !important;
}

/* Decorative bg shape — now a CSS pseudo-element instead of wp:html DOM node.
   Uses the same newsletter-bg-shape.svg at 15% opacity. */
.iz-footer-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/newsletter-bg-shape.svg');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
}

.iz-footer-cta .wp-block-kadence-column {
    position: relative;
    z-index: 1;
}

.iz-footer-cta .iz-cta-image img {
    max-width: 305px;
}

.iz-footer-cta .iz-section-eyebrow.wp-block-kadence-advancedheading {
    color: var(--white-color) !important;
}

.iz-footer-cta .iz-cta-heading {
    font-size: 40px;
    line-height: 50px;
    color: var(--white-color);
    font-family: var(--title-font);
    font-weight: 700;
    margin-bottom: 20px;
}

.iz-footer-cta .kb-btn {
    background: var(--white-color) !important;
    color: var(--secondary-color) !important;
}

.iz-footer-cta .kb-btn:hover {
    background: var(--secondary-color) !important;
    color: var(--white-color) !important;
}

/* ==========================================================================
   FOUNDATION: Global layout fixes
   ========================================================================== */

/* Kadence header is in normal document flow (position: static) — no padding
   needed on .wp-site-blocks. The header already pushes content down naturally.
   Only transparent-header needs special handling (header becomes absolute). */

/* Also kill Kadence's content-area margin and entry-content-wrap padding */
.content-title-style-hide .content-area {
    margin-top: 0;
}

.content-title-style-hide .entry-content-wrap {
    padding-top: 0;
}

/* Remove Kadence's content-area top margin and entry-content-wrap padding on homepage
   so the hero starts directly after the fixed header with no gap */
.iz-frontpage .content-area {
    margin-top: 0;
}

.iz-frontpage .entry-content-wrap {
    padding-top: 0;
}

/* Kadence fullwidth layout: body.content-width-fullwidth removes container max-width.
   Ensure our fullwidth pages also remove inner container constraints. */
.content-width-fullwidth .content-container.site-container {
    max-width: none;
    padding: 0;
}

/* Edge padding for fullwidth content.
   In fullwidth mode, sections (.kb-row-layout-wrap) span the full viewport for backgrounds.
   Content inside (.kt-row-column-wrap) needs max-width + centering + edge padding
   so text/cards don't sit flush against the viewport edges.
   IMPORTANT: Only target top-level rowlayouts (direct children of entry-content),
   NOT nested rowlayouts (e.g. .iz-hero-section inside .iz-hero-wrapper). */
.content-width-fullwidth .entry-content > .kb-row-layout-wrap > .kt-row-column-wrap {
    padding-left: var(--global-content-edge-padding, 1.5rem);
    padding-right: var(--global-content-edge-padding, 1.5rem);
    max-width: var(--global-calc-content-width, 1290px);
    margin-left: auto;
    margin-right: auto;
}

/* Admin bar: no extra padding needed — Kadence header is in flow */

/* ==========================================================================
   KADENCE ROWLAYOUT GRID
   Kadence wraps columns in .kt-row-column-wrap inside each rowlayout block.
   Always target .section-class .kt-row-column-wrap for flex/grid, and
   .section-class .wp-block-kadence-column (no >) for column sizing.
   ========================================================================== */

/* 2-column static-rendered sections */
.iz-about-section:not(:has(.kt-row-column-wrap)),
.iz-features-section:not(:has(.kt-row-column-wrap)),
.iz-skills-section:not(:has(.kt-row-column-wrap)),
.iz-faq-section:not(:has(.kt-row-column-wrap)),
.iz-footer-cta-section:not(:has(.kt-row-column-wrap)) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* 3-column dynamic-rendered sections (category cards from PHP loop) */
.iz-category-cards-row:not(:has(.kt-row-column-wrap)) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: var(--global-calc-content-width, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Pricing toggle — bridge .iz-pricing-toggle to .pricing-switch styles */
.iz-pricing-toggle {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.iz-pricing-toggle h5 {
    font-size: 18px;
    line-height: 28px;
    color: var(--common-color);
    font-family: var(--body-font);
    font-weight: 500;
    margin-bottom: 0;
    display: inline-block;
    vertical-align: middle;
}

.iz-pricing-toggle h5.active {
    color: var(--secondary-color);
}

.iz-pricing-toggle .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    vertical-align: middle;
    margin: 0 9px;
}

.iz-pricing-toggle .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.iz-pricing-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color);
    transition: 0.5s;
}

.iz-pricing-toggle .slider:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background: var(--white-color);
    box-shadow: 0px 4px 7px -1px rgb(0 0 0 / 25%);
    transition: 0.3s;
}

.iz-pricing-toggle .slider.round {
    border-radius: 30px;
}

.iz-pricing-toggle .slider.round:before {
    border-radius: 50%;
}

.iz-pricing-toggle input:checked + .slider {
    background: var(--primary-color);
}

.iz-pricing-toggle input:checked + .slider:before {
    left: calc(100% - 25px);
}

/* Yearly prices hidden by default — JS toggle switches visibility */
.iz-pricing-amount.monthly_text {
    display: none;
}

/* 4-column dynamic-rendered sections (pricing from PHP loop) */
.iz-pricing-cards:not(:has(.kt-row-column-wrap)) {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: var(--global-calc-content-width, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Dynamic pricing card button — matches .kb-button styling.
   `!important` on color because a global `a { color: var(--primary-color) }`
   rule wins on specificity and turns the button text orange otherwise. */
a.iz-pricing-btn,
.iz-pricing-btn {
    display: inline-block;
    background: var(--gradient-color);
    color: var(--white-color) !important;
    border-radius: var(--border-radius-10);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--body-font);
    text-decoration: none;
    text-transform: uppercase;
    transition: var(--transition);
}
a.iz-pricing-btn:hover,
.iz-pricing-btn:hover {
    background: var(--secondary-color);
    color: var(--white-color) !important;
}

/* Pricing card styling — targets both Kadence columns and dynamic div cards */
.iz-pricing-cards .wp-block-kadence-column,
.iz-pricing-cards .iz-pricing-card {
    background: var(--white-color);
    border-radius: var(--border-radius-10);
    box-shadow: var(--box-shadow-1);
    padding: 30px 25px;
    text-align: center;
    transition: var(--transition);
}

.iz-pricing-cards .wp-block-kadence-column:hover,
.iz-pricing-cards .iz-pricing-card:hover {
    box-shadow: 0 4px 60px -1px rgb(0 0 0 / 15%);
    transform: translateY(-5px);
}

/* Featured pricing card — elevated + accent border */
.iz-pricing-cards .iz-pricing-featured {
    transform: scale(1.05);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    border: 2px solid var(--primary-color);
    z-index: 1;
    position: relative;
}
.iz-pricing-cards .iz-pricing-featured:hover {
    transform: scale(1.05) translateY(-5px);
}

.iz-pricing-cards img {
    width: auto;
    max-width: 60px;
    height: auto;
    max-height: 60px;
    margin: 0 auto 15px;
}

.iz-pricing-cards h3 {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.iz-pricing-cards ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
    text-align: left;
}

.iz-pricing-cards ul li {
    padding: 8px 0;
    font-size: 15px;
    color: var(--common-color);
    border-bottom: 1px solid var(--bg-color, #F5F5F5);
}

.iz-pricing-cards ul li::before {
    content: "✓";
    color: var(--primary-color);
    margin-right: 10px;
    font-weight: 600;
}

/* 1-column section headers — center text */
.iz-category-section,
.iz-course-cards-section,
.iz-testimonials-section,
.iz-instructor-cards-section,
.iz-pricing-section,
.iz-blog-section {
    text-align: center;
}

/* Category section — flex on the Kadence column wrap */
.iz-category-section .kt-row-column-wrap {
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}

.iz-category-section .wp-block-kadence-column {
    flex: 0 0 100%;
}

/* ==========================================================================
   SECTION SPACING — 120px top/bottom like reference
   ========================================================================== */

.iz-category-section,
.iz-course-cards-section,
.iz-about-section,
.iz-features-section,
.iz-testimonials-section,
.iz-instructor-cards-section,
.iz-pricing-section,
.iz-blog-section,
.iz-footer-cta-section {
    padding-top: var(--sec-space-120);
    padding-bottom: var(--sec-space-120);
}

/* Testimonials header — reference uses sec-space-bottom (no top padding).
   Our split layout (header block + slider block) needs 0 top to avoid
   double spacing with the section above (which has its own bottom padding). */
.iz-testimonials-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Testimonials Swiper section — remove duplicate top/bottom padding */
.testimonial-sec.sec-space {
    padding-top: 0;
    padding-bottom: 60px;
}

/* Category section heading — reduce bottom padding so cards sit close to title.
   Reference has no extra gap between heading and first card row. */
.iz-category-section {
    padding-bottom: 0 !important;
}
.iz-category-section .kt-inside-inner-col {
    padding-bottom: 0 !important;
}

/* Category card rows — minimal vertical padding, tighter gap.
   Reference uses --bs-gutter-y: 24px between card rows. */
.iz-category-cards-row {
    padding-top: 10px;
    padding-bottom: 0;
}

/* Tighten Kadence's default 32px gap to match reference 24px */
.iz-category-cards-row .kt-row-column-wrap {
    gap: 24px !important;
}

/* Partners strip — reference uses padding: 52px 0 with container-fluid */
.iz-partners-section {
    padding-top: 52px;
    padding-bottom: 52px;
}

/* Events section */
.iz-events-section {
    padding-top: var(--sec-space-120);
    padding-bottom: var(--sec-space-120);
    isolation: isolate; /* stacking context so ::before dark bg stays visible */
    max-width: var(--global-calc-content-width, 1320px);
    margin-left: auto;
    margin-right: auto;
}

/* Events section — centered header text */
.iz-events-section .iz-section-header {
    text-align: center;
}

/* Events cards wrapper — spacing between cards */
.iz-events-section .our-event-box-wp .our-event-box:not(:last-child) {
    margin-bottom: 30px;
}

/* ==========================================================================
   SECTION TYPOGRAPHY — match reference heading sizes
   ========================================================================== */

/* Eyebrow subtitles — orange, uppercase, 22px */
.iz-section-eyebrow {
    display: block;
    font-size: 22px !important;
    line-height: 22px !important;
    color: var(--primary-color) !important;
    font-family: var(--title-font) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    margin-bottom: 24px !important;
}

/* Section h2 titles — 50px/60px matching reference .h2-title */
.iz-section-title {
    font-size: 50px !important;
    line-height: 60px !important;
    font-weight: 700 !important;
    color: var(--secondary-color) !important;
    margin-bottom: 28px !important;
}

/* Section title bottom spacing in centered sections */
.iz-course-cards-section .iz-section-title,
.iz-testimonials-section .iz-section-title,
.iz-instructor-cards-section .iz-section-title,
.iz-events-section .iz-section-title,
.iz-blog-section .iz-section-title,
.iz-pricing-section .iz-section-title {
    margin-bottom: 50px !important;
}

/* ==========================================================================
   TESTIMONIALS CAROUSEL — native Query Loop (iz_testimonial) mapped into Swiper
   .iz-testimonials-carousel.swiper.testimonial-slider
     > ul.wp-block-post-template.swiper-wrapper
       > li.wp-block-post   (slide; Swiper slideClass = wp-block-post)
   ========================================================================== */

/* Swiper container must clip — otherwise all slides show at content width */
.iz-testimonials-carousel.swiper {
    overflow: hidden;
    padding: 8px 6px 22px;   /* room for card box-shadow inside the clip */
}

/* Reset the post-template <ul> so it behaves as the Swiper wrapper */
.iz-testimonials-carousel .wp-block-post-template {
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;    /* equal-height cards across the row */
}

.iz-testimonials-carousel .wp-block-post {
    list-style: none;
    /* Custom slideClass misses Swiper's `.swiper-slide{flex-shrink:0}`, so the
       flex slides would shrink below Swiper's assigned width. Pin them. */
    flex-shrink: 0;
    position: relative;
    height: auto;            /* let .testimonial-box fill the slide height */
    margin: 0;
}

/* Card fills the slide so heights/shadows align across the row */
.iz-testimonials-carousel .testimonial-box {
    height: 100%;
    width: 100%;
    margin: 0;
}

/* Bound avatar -> fill the circular .client-image */
.iz-testimonials-carousel .client-image.wp-block-image {
    width: 80px;
    height: 80px;
    margin: 0;
}

.iz-testimonials-carousel .client-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No featured image (avatar binding returns "") -> hide the empty circle so
   photo-less testimonials read cleanly (title + role + stars + text). */
.iz-testimonials-carousel .client-image:has(img[src=""]),
.iz-testimonials-carousel .client-image:has(img:not([src])) {
    display: none;
}

.iz-testimonials-carousel .client-image-title-wp {
    min-height: 0;
}

/* Name (post title) */
.iz-testimonials-carousel .client-info .wp-block-post-title {
    margin: 0 0 4px;
}

/* Unicode star rating (binding outputs ★ characters; no <i> elements) */
.iz-testimonials-carousel .iz-tm-stars {
    display: block;
    margin: 0;
    line-height: 1;
    letter-spacing: 2px;
    font-size: 16px;
    color: var(--yellow-color);
}

/* Review text (post content) — trim long testimonials to a uniform 5 lines so
   one long review can't make every (equal-height) card excessively tall. Adds
   an ellipsis only when truncated; works across all breakpoints. */
.iz-testimonials-carousel .client-review-text {
    margin: 0;
}

.iz-testimonials-carousel .client-review-text .entry-content {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

.iz-testimonials-carousel .client-review-text .entry-content > * {
    margin: 0;
}

.iz-testimonials-carousel .client-info {
    min-width: 0;
}

/* Pricing header — reduce bottom padding so cards sit closer to toggle */
.iz-pricing-section {
    padding-bottom: 20px !important;
}

/* Category section title — tighter spacing, cards flow right below */
.iz-category-section .iz-section-title {
    margin-bottom: 10px !important;
}

/* Events section — white text */
.iz-events-section .iz-section-eyebrow {
    color: var(--primary-color) !important;
}
.iz-events-section .iz-section-title {
    color: var(--white-color) !important;
}

/* Responsive heading sizes */
@media (max-width: 991px) {
    .iz-section-title {
        font-size: 40px !important;
        line-height: 50px !important;
    }
    .iz-section-eyebrow {
        font-size: 18px !important;
    }
}
@media (max-width: 575px) {
    .iz-section-title {
        font-size: 32px !important;
        line-height: 38px !important;
    }
}

/* ==========================================================================
   GLOBAL BUTTON STYLING — all Kadence buttons orange
   Kadence outputs inline styles on .kb-button that override our CSS,
   so we use !important on background/color/padding.
   ========================================================================== */

.wp-block-kadence-singlebtn .kb-button,
a.kb-button {
    background: var(--gradient-color) !important;
    color: var(--white-color) !important;
    border: none !important;
    border-radius: var(--border-radius-10) !important;
    padding: 18px 32px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: var(--body-font) !important;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.wp-block-kadence-singlebtn .kb-button:hover,
a.kb-button:hover {
    background: var(--secondary-color) !important;
    color: var(--white-color) !important;
}

/* Button arrow icon */
.wp-block-kadence-singlebtn .kb-button::after,
a.kb-button::after {
    content: "→";
    font-size: 18px;
}

/* Footer CTA — white button on dark bg (override orange) */
.iz-footer-cta-section .kb-button {
    background: var(--white-color) !important;
    color: var(--secondary-color) !important;
}
.iz-footer-cta-section .kb-button:hover {
    background: var(--secondary-color) !important;
    color: var(--white-color) !important;
}

/* Postgrid "Join Now" buttons in pricing cards */
.iz-pricing-cards .kb-button {
    padding: 12px 24px !important;
    font-size: 14px !important;
}

/* ==========================================================================
   CATEGORY CARDS — card styling
   ========================================================================== */

/* Category card outer — Kadence column or dynamic <a> link. */
.iz-category-card {
    padding: 0 !important; /* remove Kadence column padding — inner-col handles it */
    background: var(--white-color);
    border-radius: var(--border-radius-10);
    box-shadow: var(--box-shadow-1);
    transition: var(--transition);
    cursor: pointer;
    overflow: hidden;
}

/* Dynamic category cards render as <a> tags — ensure block display + no underline */
a.iz-category-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Category card inner — this is where Kadence puts the actual content.
   Apply the icon+text grid HERE, not on the outer column.
   Reference: .category-list-box { display:flex; gap:19px; padding:29px 30px }
   Our DOM: [.category-list-icon, h4, p] — 3 children, so use grid to keep
   icon on left spanning both text rows. */
.iz-category-card .kt-inside-inner-col {
    display: grid !important;
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto;
    column-gap: 19px;
    row-gap: 0;
    align-items: center;
    padding: 29px 30px;
}

/* Icon spans both rows (title + count) */
.iz-category-card .kt-inside-inner-col > .category-list-icon,
.iz-category-card .kt-inside-inner-col > .wp-block-group:first-child,
.iz-category-card .kt-inside-inner-col > figure:first-child {
    grid-row: 1 / -1;
}

.iz-category-card:hover {
    box-shadow: 0 4px 60px -1px rgb(0 0 0 / 15%);
    transform: translateY(-3px);
}

/* Category card icon container */
.iz-category-card .category-list-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    position: relative;
    width: 50px;
    height: 55px;
}

.iz-category-card .category-list-icon img {
    width: 50px;
    height: 55px;
    object-fit: contain;
}

/* Icon swap: both icons stacked, show/hide on hover */
.iz-category-card .category-list-icon .category-icon {
    position: absolute;
    top: 0;
    left: 0;
    transition: var(--transition);
}

/* Category card text — tight vertical spacing, no margin overflow */
.iz-category-card h4,
.iz-category-card .wp-block-kadence-advancedheading {
    font-size: 22px;
    line-height: 28px;
    color: var(--secondary-color);
    margin: 0;
    align-self: center;
}

.iz-category-card p {
    font-size: 15px;
    color: var(--common-color);
    margin: 0;
}

/* Category card hover — gradient bg + text color change */
.iz-category-card:hover {
    background: var(--gradient-color-2);
}

.iz-category-card:hover h4,
.iz-category-card:hover .wp-block-kadence-advancedheading {
    color: var(--white-color);
}

.iz-category-card:hover p,
.iz-category-card:hover .iz-category-count {
    color: var(--pink-color-1, #ff7eb3);
}

/* Category card icon swap: cross-fade default -> hover (white) icon on hover.
   Uses opacity (not display) so it overrides the legacy unscoped rule
   `.category-list-icon .category-icon.hover-icon{opacity:0}` (components.css),
   which otherwise leaks in and leaves the icon blank on hover. */
.iz-category-card .category-icon {
    opacity: 1;
}

.iz-category-card .category-icon.hover-icon {
    opacity: 0;
}

.iz-category-card:hover .category-icon:not(.hover-icon) {
    opacity: 0;
}

.iz-category-card:hover .category-icon.hover-icon {
    opacity: 1;
}

.iz-category-card:hover .category-list-icon .category-icon {
    animation: hvr-buzz-out 0.75s linear 1;
}

/* ==========================================================================
   ABOUT SECTION — image left, text+features right, counters below
   ========================================================================== */

.iz-about-section {
    padding: var(--sec-space-120) 0 calc(var(--sec-space-120) - 8px);
}

/* About image column — contain absolutely positioned floating elements */
.about-image-content {
    position: relative;
}

/* About text column — vertically centered, tighter spacing */
.iz-about-text-col {
    align-self: center;
}

.iz-about-text-col .iz-section-eyebrow {
    margin-bottom: 10px !important;
}

.iz-about-text-col .iz-section-title {
    margin-bottom: 22px !important;
}

/* Description paragraph */
.iz-about-text-col .wp-block-kadence-advancedheading:not(.iz-section-eyebrow):not(.iz-section-title) {
    margin-bottom: 19px !important;
    font-size: 16px;
    line-height: 28px;
    color: var(--common-color);
}

/* Button row after feature boxes */
.iz-about-text-col .wp-block-kadence-advancedbtn {
    margin-top: 27px;
}

/* About counters row — 4 columns below the 2-col layout */
.iz-about-counters-row {
    padding: 40px 0 60px;
}

.iz-about-counters-row .about-counter-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

/* Counter row when standalone (outside about section wrapper) — reduce top margin */
.entry-content > .about-counter-row,
.entry-content .about-counter-row {
    margin-top: 40px;
}

/* Counter row wrapper — constrain within content width on fullwidth pages */
.entry-content > .row:has(.about-counter-row) {
    max-width: var(--global-calc-content-width, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ==========================================================================
   FEATURES SECTION — 2-col: features list + image
   ========================================================================== */

.iz-features-section {
    padding: var(--sec-space-120) 0 calc(var(--sec-space-120) - 8px);
    position: relative;
    isolation: isolate;
}

/* Features section light bg via pseudo-element */
.iz-features-section::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background-color: var(--bg-color, #F5F5F5);
    z-index: -1;
}

/* Feature items — each is icon + title + text */
.iz-feature-card {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.iz-feature-icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(232, 147, 46, 0.1);
    border-radius: 50%;
}

.iz-feature-icon img {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    object-fit: contain;
}

.iz-feature-title {
    font-size: 22px;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.iz-feature-text {
    font-size: 15px;
    color: var(--common-color);
}

/* Features image column — vertically centered (reference: col-lg-6 align-self-center) */
.iz-features-section .wp-block-kadence-column:last-child {
    align-self: center;
}

.iz-features-section .wp-block-kadence-column:last-child figure img {
    border-radius: var(--border-radius-10);
    width: 100%;
    height: auto;
}

/* ==========================================================================
   BLOG CARDS — 3-column grid with card styling
   ========================================================================== */

/* Blog cards section using wp:query */
.iz-blog-cards-section .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
}

.iz-blog-cards-section .wp-block-post {
    background: var(--white-color);
    border-radius: var(--border-radius-10);
    overflow: hidden;
    box-shadow: var(--box-shadow-1);
}

.iz-blog-cards-section .wp-block-post-featured-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.iz-blog-cards-section .wp-block-post-date,
.iz-blog-cards-section .wp-block-post-title,
.iz-blog-cards-section .wp-block-post-excerpt {
    padding: 0 20px;
}

.iz-blog-cards-section .wp-block-post-date {
    padding-top: 15px;
    font-size: 13px;
    color: var(--primary-color);
}

.iz-blog-cards-section .wp-block-post-title {
    font-size: 20px;
    line-height: 28px;
}

.iz-blog-cards-section .wp-block-post-title a {
    color: var(--secondary-color) !important;
    text-decoration: none;
}

.iz-blog-cards-section .wp-block-post-title a:hover {
    color: var(--primary-color) !important;
}

.iz-blog-cards-section .wp-block-post-excerpt {
    padding-bottom: 20px;
    font-size: 15px;
}

@media (max-width: 991px) {
    .iz-blog-cards-section .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .iz-blog-cards-section .wp-block-post-template {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   KADENCE POSTGRID — card styling for courses, events, instructors
   The postgrid outputs .kt-post-grid-layout-grid-wrap with articles inside.
   ========================================================================== */

/* Course grid — PHP-rendered cards via iz_render_course_card() */
.iz-course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: var(--global-calc-content-width, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Course grid filtering */
.iz-courses-page-wp {
    max-width: var(--global-calc-content-width, 1320px);
    margin: 40px auto 0;
    padding-left: 15px;
    padding-right: 15px;
}
.iz-courses-page-wp .iz-course-grid {
    padding-left: 0;
    padding-right: 0;
}
.iz-course-grid-item { transition: opacity 0.3s ease; }
.iz-course-grid-item.iz-filtered-hidden { display: none; }

/* Legacy: Force 3-column grid for PostGrid (kept for backwards compat) */
.kt-post-loopkbcrs004 .kt-post-grid-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px;
}

.kt-post-loopkbev0004 .kt-post-grid-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px;
}

.kt-post-loopkbic0004 .kt-post-grid-wrap {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px;
}

/* Card styling — white bg, shadow, rounded corners */
.wp-block-kadence-postgrid .kt-blocks-post-grid-item {
    background: var(--white-color);
    border-radius: var(--border-radius-10);
    overflow: hidden;
    box-shadow: var(--box-shadow-1);
    transition: var(--transition);
}

.wp-block-kadence-postgrid .kt-blocks-post-grid-item:hover {
    box-shadow: 0 4px 60px -1px rgb(0 0 0 / 15%);
    transform: translateY(-3px);
}

/* Card inner padding */
.wp-block-kadence-postgrid .kt-blocks-post-grid-item-inner {
    padding: 20px;
}

/* Card title */
.wp-block-kadence-postgrid .entry-title {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 10px;
}

.wp-block-kadence-postgrid .entry-title a {
    color: var(--secondary-color);
    text-decoration: none;
}

.wp-block-kadence-postgrid .entry-title a:hover {
    color: var(--primary-color);
}

/* Card meta — smaller, muted */
.wp-block-kadence-postgrid .kt-blocks-post-top-meta {
    font-size: 13px;
    color: var(--common-color);
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
}

.wp-block-kadence-postgrid .kt-blocks-date-pretext {
    display: none;
}

/* Date in orange like reference */
.wp-block-kadence-postgrid .kt-blocks-post-date {
    color: var(--primary-color);
    font-weight: 500;
}

/* Hide comments count — not relevant for CPTs */
.wp-block-kadence-postgrid .kt-blocks-comments,
.wp-block-kadence-postgrid .kt-blocks-post-comments {
    display: none;
}

/* Card excerpt */
.wp-block-kadence-postgrid .entry-content {
    font-size: 15px;
    line-height: 24px;
    color: var(--common-color);
}

/* Card body content (excerpt from postgrid) */
.wp-block-kadence-postgrid .kt-blocks-post-body-content {
    font-size: 15px;
    line-height: 24px;
    color: var(--common-color);
}

/* Featured image styling */
.wp-block-kadence-postgrid .kt-blocks-post-grid-item img.wp-post-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.wp-block-kadence-postgrid .kt-blocks-post-grid-item:hover img.wp-post-image {
    transform: scale(1.05);
}

/* Image wrapper overflow hidden for hover scale */
.wp-block-kadence-postgrid .kt-blocks-post-top-meta-image,
.wp-block-kadence-postgrid .kt-feat-image-align-none .kadence-post-image {
    overflow: hidden;
    border-radius: var(--border-radius-10) var(--border-radius-10) 0 0;
}

/* Hide empty footer */
.wp-block-kadence-postgrid .kt-blocks-post-footer {
    display: none;
}

/* Instructor cards — image styling */
.kt-post-loopkbic0004 .kt-blocks-post-grid-item img.wp-post-image {
    height: 280px;
    object-fit: cover;
}

/* Events section — white text cards on dark bg */
.iz-events-section .kt-blocks-post-grid-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--border-radius-10);
    padding: 20px;
    transition: var(--transition);
}
.iz-events-section .kt-blocks-post-grid-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
}

.iz-events-section .entry-title a {
    color: var(--white-color);
}

.iz-events-section .entry-title a:hover {
    color: var(--primary-color);
}

.iz-events-section .kt-blocks-post-top-meta,
.iz-events-section .entry-content {
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive postgrid + course grid */
@media (max-width: 991px) {
    .iz-course-grid,
    .kt-post-loopkbcrs004 .kt-post-grid-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .kt-post-loopkbic0004 .kt-post-grid-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .iz-course-grid,
    .kt-post-loopkbcrs004 .kt-post-grid-wrap,
    .kt-post-loopkbic0004 .kt-post-grid-wrap {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   NEWSLETTER SECTION
   ========================================================================== */

/* Newsletter — orange floating bar overlapping into the next section.
   Overlap only on desktop: the inner card's padding and heading scale down
   on tablet/mobile, so a negative margin leaves a visible white gap between
   the bar and the section below. On mobile use a positive breathing gap. */
.iz-newsletter-section {
    position: relative;
    z-index: 2;
    margin-top: 60px;
    margin-bottom: -60px;
}

@media (max-width: 991px) {
    .iz-newsletter-section {
        margin-top: 40px;
        margin-bottom: -30px;
    }
}

@media (max-width: 767px) {
    .iz-newsletter-section {
        margin-top: 0;
        margin-bottom: 0;
    }
}

.iz-newsletter-section .kt-row-column-wrap {
    background-color: var(--primary-color);
    border-radius: var(--border-radius-10);
    padding: 80px 80px 63px;
    overflow: hidden;
    position: relative;
}

/* Two-column grid: heading left, form right */
.iz-newsletter-section .iz-newsletter-content {
    width: 100%;
    max-width: none;
}

.iz-newsletter-section .iz-newsletter-content .kt-inside-inner-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 10px 30px;
}

/* Eyebrow + heading stay in left column */
.iz-newsletter-section .iz-section-eyebrow {
    grid-column: 1;
    color: var(--white-color) !important;
    margin-bottom: 0 !important;
}

.iz-newsletter-section .iz-newsletter-heading {
    grid-column: 1;
    color: var(--white-color) !important;
    font-size: 40px !important;
    line-height: 50px !important;
    margin-bottom: 0 !important;
}

/* Form in right column, spanning both rows */
.iz-newsletter-section .iz-newsletter-form {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
}

/* Decorative bg shape — now a CSS pseudo-element instead of wp:html DOM node */
.iz-newsletter-section .kt-row-column-wrap::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 108px;
    width: 838px;
    height: 488px;
    background-image: url('../images/newsletter-bg-shape.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.15;
    pointer-events: none;
}

/* Form takes remaining space */
.iz-newsletter-form {
    flex: 1;
    min-width: 300px;
}

/* Newsletter form — overlaid button on input (reference layout) */
.iz-newsletter-input-wrap {
    position: relative;
    max-width: 550px;
    margin: 30px auto 0;
}

.iz-newsletter-input-wrap input {
    width: 100%;
    height: 70px;
    padding: 5px 200px 5px 25px;
    border-radius: var(--border-radius-10);
    border: 1px solid var(--border-color, #E0E0E0);
    font-size: 15px;
    outline: none;
    background: var(--white-color);
}

.iz-newsletter-input-wrap button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background: var(--gradient-color);
    color: var(--white-color);
    border: none;
    padding: 0 35px;
    border-radius: var(--border-radius-10);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.iz-newsletter-input-wrap button:hover {
    opacity: 0.9;
}

@media (max-width: 575px) {
    .iz-newsletter-input-wrap input {
        padding-right: 25px;
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .iz-newsletter-input-wrap button {
        position: static;
        width: 100%;
        margin-top: 10px;
        padding: 15px;
    }
}

/* ==========================================================================
   FOOTER CTA (Apply Now)
   ========================================================================== */

.iz-footer-cta-section {
    padding: 30px 0;
    margin-top: 60px;
}

.iz-footer-cta-image-col {
    align-self: end;
}

.iz-footer-cta-image-col img {
    max-width: 280px;
    height: auto;
    display: block;
}

.iz-footer-cta-text-col .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 0;
}

.iz-footer-cta-section p,
.iz-footer-cta-section h3,
.iz-footer-cta-section h2,
.iz-footer-cta-section .wp-block-kadence-advancedheading {
    color: var(--white-color);
}

/* Footer CTA button — white on dark bg */
.iz-footer-cta-section .kb-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--white-color) !important;
    color: var(--secondary-color) !important;
    padding: 15px 30px !important;
    border-radius: var(--border-radius-10) !important;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.iz-footer-cta-section .kb-button::after {
    content: "→";
}

.iz-footer-cta-section .kb-button:hover {
    background: var(--secondary-color) !important;
    color: var(--white-color) !important;
}

/* ==========================================================================
   PAGE BANNER (inner pages)
   ========================================================================== */

.iz-page-banner-section,
.iz-page-banner {
    padding: 120px 0 60px;
    text-align: center;
    overflow:hidden;
}

.iz-page-banner-section h1,
.iz-page-banner h1 {
    font-size: 65px;
    line-height: 75px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 14px;
}

.iz-page-banner-section .iz-breadcrumb a,
.iz-page-banner a {
    color: var(--primary-color);
    text-decoration: none;
}

.iz-page-banner-section .iz-breadcrumb a:hover,
.iz-page-banner a:hover {
    color: var(--accent-color, var(--primary-color));
}

/* Responsive: stack static-rendered columns on tablet/mobile */
@media (max-width: 991px) {
    .iz-about-section:not(:has(.kt-row-column-wrap)),
    .iz-features-section:not(:has(.kt-row-column-wrap)),
    .iz-skills-section:not(:has(.kt-row-column-wrap)),
    .iz-faq-section:not(:has(.kt-row-column-wrap)),
    .iz-footer-cta-section:not(:has(.kt-row-column-wrap)) {
        grid-template-columns: 1fr;
    }
    .iz-category-cards-row:not(:has(.kt-row-column-wrap)) {
        grid-template-columns: repeat(2, 1fr);
    }
    .iz-pricing-cards:not(:has(.kt-row-column-wrap)) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .iz-category-cards-row:not(:has(.kt-row-column-wrap)),
    .iz-pricing-cards:not(:has(.kt-row-column-wrap)) {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FULL-WIDTH BACKGROUNDS (pseudo-element technique)
   Content stays within 1320px constrained layout. Backgrounds span
   the full viewport via ::before pseudo-elements. See lessons.md #5.
   ========================================================================== */

.iz-hero-bg-shapes,
.iz-footer-cta-section,
.iz-partners-section,
.iz-events-section,
.iz-page-banner-section,
.iz-page-banner {
    position: relative;
}

.iz-hero-bg-shapes::before,
.iz-footer-cta-section::before,
.iz-partners-section::before,
.iz-events-section::before,
.iz-page-banner-section::before,
.iz-page-banner::before {
    content: "";
    display: block;            /* override Kadence clearfix display:table */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: -1;
}

/* Hero bg-shapes: light background */
.iz-hero-bg-shapes::before {
    background-color: var(--light-white-color);
}

/* Footer CTA: orange/primary background spanning full container */
.iz-footer-cta-section::before {
    background-color: var(--primary-color);
    border-radius: var(--border-radius-10);
    left: -15px;
    right: -15px;
    width: auto;
    transform: none;
}

/* Partners strip: dark navy background */
.iz-partners-section::before {
    background-color: var(--secondary-color);
}

/* Partners logos: grayscale + white tint */
.iz-partners-section img {
    filter: grayscale(1) brightness(2);
    opacity: 0.6;
    max-height: 50px;
    width: auto;
}

/* Events section: dark navy background */
.iz-events-section::before {
    background-color: var(--secondary-color);
}

/* Events section: white text on dark bg (headings only, not card content) */
.iz-events-section .wp-block-kadence-advancedheading,
.iz-events-section > .kb-row-layout-wrap h2 {
    color: var(--white-color);
}

/* Page banner: light background for inner pages */
.iz-page-banner-section::before,
.iz-page-banner::before {
    background-color: var(--light-white-color);
}

/* ==========================================================================
   HERO BANNER
   Two sibling blocks:
     1. .iz-hero-bg-shapes (wp:html — decorative shapes/aliments)
     2. .iz-hero-section   (kadence/rowlayout — text + image columns)
   .iz-hero-bg-shapes provides the full-bleed light background and
   decorative shapes. .iz-hero-section pulls up into that space via
   negative margin. Flex layout targets .kt-row-column-wrap since
   Kadence wraps columns there — not as direct children of the rowlayout.
   ========================================================================== */

.iz-hero-wrapper {
    position: relative;
    padding: 212px 0 122px;
    background-color: var(--light-white-color);
    overflow: hidden;
}

/* bg-shapes must be position:absolute to overlay hero content, not push it down.
   The general rule at line 1108 sets position:relative for ::before trick,
   but bg-shapes needs absolute to avoid taking up space in the flow. */
.iz-hero-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

/* Row layout must sit above the absolutely positioned bg-shapes */
.iz-hero-wrapper > .wp-block-kadence-rowlayout {
    position: relative;
    z-index: 10;
}

/* Hero rowlayout — flex container for side-by-side columns.
   No extra padding-top needed since .iz-hero-wrapper handles header clearance. */
.iz-hero-section {
    position: relative;
    z-index: 5;
    margin-top: 0;
    padding-top: 0;
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}

/* Kadence injects .kt-row-column-wrap as the actual flex container.
   Force strict 50/50 split like Bootstrap col-lg-6. */
.iz-hero-section .kt-row-column-wrap {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: center;
}

/* Strict 50% columns — prevents image from bleeding into text column */
.iz-hero-section .kt-row-column-wrap > .wp-block-kadence-column {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
    min-width: 0;
}

/* Image column: let 50% rule handle width, contain overflow */
.iz-hero-col-image {
    /* overflow: hidden; */
}

/* Hero text column — push text down like reference's .banner-content padding-top:130px.
   This offsets text relative to the image so heading aligns with middle of hero image. */
.iz-hero-col-text .kt-inside-inner-col {
    padding-top: 130px;
}

.iz-hero-col-text .iz-hero-eyebrow {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Hero eyebrow — orange accent color like reference */
.iz-hero-eyebrow {
    color: var(--primary-color) !important;
    font-size: 16px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.iz-hero-col-text .iz-hero-heading {
    font-size: clamp(32px, 7vw, 64px);
    line-height: 1.12;
    font-weight: 800;
    color: var(--secondary-color);
    margin-bottom: 25px;
}

.iz-hero-col-text .iz-hero-description {
    font-size: clamp(15px, 2.4vw, 18px);
    line-height: 1.55;
    margin-bottom: 20px;
    max-width: 415px;
}

/* Hero CTA button — match reference .sec-btn with gradient + arrow */
.iz-hero-cta .kb-button,
.iz-hero-section .kb-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: var(--gradient-color) !important;
    border-radius: var(--border-radius-10) !important;
    font-size: 15px;
    line-height: 1.2;
    color: var(--white-color) !important;
    font-weight: 500;
    font-family: var(--body-font);
    text-transform: uppercase;
    padding: 18px 32px !important;
    transition: var(--transition);
    text-decoration: none;
}
.iz-hero-cta .kb-button::after,
.iz-hero-section .kb-button::after {
    content: "→";
    font-size: 18px;
}
.iz-hero-cta .kb-button:hover,
.iz-hero-section .kb-button:hover {
    background: var(--secondary-color) !important;
}

/* Hero image column — gradient background shape */
.iz-hero-col-image {
    position: relative;
    z-index: 2;
    text-align: right;
}

.iz-hero-col-image::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 85%;
    background: var(--gradient-color-2);
    border-radius: 100px 100px 100px 0;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0% 100%);
    z-index: 0;
}

.iz-hero-col-image .iz-hero-image,
.iz-hero-col-image figure {
    position: relative;
    z-index: 1;
    max-width: 510px;
    width: 100%;
    margin: 0 auto;
}

.iz-hero-col-image img {
    max-width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

/* Hero badges (congrats box, certification badge) */
.iz-hero-badges {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Students List in Hero */
.iz-hero-students {
    margin-bottom: 40px;
}
.students-list {
    display: flex;
    align-items: center;
    gap: 20px;
}

.iz-hero-image {
    position: relative !important;
    display: inline-block !important;
}

/* Reset the Kadence Image Block to behave like a normal inline block */
.wp-block-kadence-image.iz-hero-image {
    display: inline-flex !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 535px;
    width: 100%;
}

.wp-block-kadence-image.iz-hero-image img {
    position: relative;
    z-index: 2;
    margin: 0 !important;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.wp-block-kadence-image.iz-hero-image::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(-90deg, var(--global-palette1, #E8932E) 0%, #C47820 100%) !important;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NzAiIGhlaWdodD0iNDkwIiB2aWV3Qm94PSIwIDAgNTcwIDQ5MCIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik0wIDEwMEMwIDQ0Ljc3MTUgNDQuNzcxNSAwIDEwMCAwSDQ3MEM1MjUuMjI4IDAgNTcwIDQ0Ljc3MTUgNTcwIDEwMFY0MjIuOTgyQzU3MCA0MjguMTA2IDU2Ni4xMjcgNDMyLjQwMSA1NjEuMDMgNDMyLjkyOUwxMS4wMjk2IDQ4OS44NThDNS4xMzEwMyA0OTAuNDY5IDAgNDg1Ljg0MiAwIDQ3OS45MTFWMTAwWiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzFfNzMzOSkiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xXzczMzkiIHgxPSI1NzAiIHkxPSIyNDUuNSIgeDI9IjAiIHkyPSIyNDUuNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjQTQ0NEZEIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0QwNUVGQyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NzAiIGhlaWdodD0iNDkwIiB2aWV3Qm94PSIwIDAgNTcwIDQ5MCIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik0wIDEwMEMwIDQ0Ljc3MTUgNDQuNzcxNSAwIDEwMCAwSDQ3MEM1MjUuMjI4IDAgNTcwIDQ0Ljc3MTUgNTcwIDEwMFY0MjIuOTgyQzU3MCA0MjguMTA2IDU2Ni4xMjcgNDMyLjQwMSA1NjEuMDMgNDMyLjkyOUwxMS4wMjk2IDQ4OS44NThDNS4xMzEwMyA0OTAuNDY5IDAgNDg1Ljg0MiAwIDQ3OS45MTFWMTAwWiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzFfNzMzOSkiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xXzczMzkiIHgxPSI1NzAiIHkxPSIyNDUuNSIgeDI9IjAiIHkyPSIyNDUuNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjQTQ0NEZEIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0QwNUVGQyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPg==");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom center;
    mask-position: bottom center;
    z-index: 1;
}

/* Admin bar offset for fixed header */
.admin-bar .site-header {
    top: 32px;
}

/* ==========================================================================
   SHARED: .sec-btn equivalent for wp:button
   ========================================================================== */

.iz-pattern-section .wp-block-button.iz-sec-btn .wp-block-button__link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--gradient-color);
    border-radius: var(--border-radius-10);
    font-size: 15px;
    line-height: 1.2;
    color: var(--white-color);
    font-weight: 500;
    font-family: var(--body-font);
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding: 21px 36px;
    outline: none;
    border: none;
    transition: var(--transition);
    background-size: 100% 100%;
    background-position: left center;
    z-index: 1;
}

.iz-pattern-section .wp-block-button.iz-sec-btn .wp-block-button__link:hover {
    background-position: right center;
    background-size: 200% 100%;
    color: var(--white-color);
}

.iz-pattern-section .wp-block-button.iz-sec-btn .wp-block-button__link::after {
    --size: 122px;
    content: "";
    position: absolute;
    top: -65px;
    right: -48px;
    width: var(--size);
    height: var(--size);
    opacity: 0.2;
    background: var(--white-color);
    --mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5OCIgaGVpZ2h0PSIxMDIiIHZpZXdCb3g9IjAgMCA5OCAxMDIiPgo8cGF0aCBkPSJNNDAuNzcyIDQuODk3OTFDNDQuMzQ3MyAtMS41NzU3MiA1My42NTI3IC0xLjU3NTcyIDU3LjIyOCA0Ljg5NzkxVjQuODk3OTFDNTkuNjIwMSA5LjIyOTE2IDY0Ljk2MDQgMTAuOTY0MyA2OS40NDE1IDguODY2MzNWOC44NjYzM0M3Ni4xMzkxIDUuNzMwNTggODMuNjY3MyAxMS4yMDAxIDgyLjc1NDcgMTguNTM4OVYxOC41Mzg5QzgyLjE0NDEgMjMuNDQ5IDg1LjQ0NDYgMjcuOTkxOCA5MC4zMDMxIDI4LjkyODRWMjguOTI4NEM5Ny41NjQ3IDMwLjMyODMgMTAwLjQ0IDM5LjE3ODIgOTUuMzg4MyA0NC41NzlWNDQuNTc5QzkyLjAwODIgNDguMTkyNCA5Mi4wMDgyIDUzLjgwNzYgOTUuMzg4MyA1Ny40MjFWNTcuNDIxQzEwMC40NCA2Mi44MjE4IDk3LjU2NDcgNzEuNjcxNyA5MC4zMDMxIDczLjA3MTZWNzMuMDcxNkM4NS40NDQ2IDc0LjAwODIgODIuMTQ0MSA3OC41NTEgODIuNzU0NyA4My40NjExVjgzLjQ2MTFDODMuNjY3MyA5MC43OTk5IDc2LjEzOTEgOTYuMjY5NCA2OS40NDE1IDkzLjEzMzdWOTMuMTMzN0M2NC45NjA0IDkxLjAzNTcgNTkuNjIwMSA5Mi43NzA4IDU3LjIyOCA5Ny4xMDIxVjk3LjEwMjFDNTMuNjUyNyAxMDMuNTc2IDQ0LjM0NzMgMTAzLjU3NiA0MC43NzIgOTcuMTAyMVY5Ny4xMDIxQzM4LjM3OTkgOTIuNzcwOCAzMy4wMzk2IDkxLjAzNTcgMjguNTU4NSA5My4xMzM3VjkzLjEzMzdDMjEuODYwOSA5Ni4yNjk0IDE0LjMzMjcgOTAuNzk5OSAxNS4yNDUzIDgzLjQ2MTFWODMuNDYxMUMxNS44NTU5IDc4LjU1MSAxMi41NTU0IDc0LjAwODIgNy42OTY5IDczLjA3MTZWNzMuMDcxNkMwLjQzNTI3MyA3MS42NzE3IC0yLjQ0MDIzIDYyLjgyMTggMi42MTE3MiA1Ny40MjFWNTcuNDIxQzUuOTkxNzggNTMuODA3NiA1Ljk5MTc4IDQ4LjE5MjQgMi42MTE3MiA0NC41NzlWNDQuNTc5Qy0yLjQ0MDIzIDM5LjE3ODIgMC40MzUyNzIgMzAuMzI4MyA3LjY5NjkgMjguOTI4NFYyOC45Mjg0QzEyLjU1NTQgMjcuOTkxOCAxNS44NTU5IDIzLjQ0OSAxNS4yNDUzIDE4LjUzODlWMTguNTM4OUMxNC4zMzI3IDExLjIwMDEgMjEuODYwOSA1LjczMDU4IDI4LjU1ODUgOC44NjYzM1Y4Ljg2NjMzQzMzLjAzOTYgMTAuOTY0MyAzOC4zNzk5IDkuMjI5MTYgNDAuNzcyIDQuODk3OTFWNC44OTc5MVoiLz4KPC9zdmc+");
    -webkit-mask-image: var(--mask-image);
    mask-image: var(--mask-image);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: var(--transition);
    z-index: -1;
}

.iz-pattern-section .wp-block-button.iz-sec-btn .wp-block-button__link:hover::after {
    animation: spin 6000ms infinite linear;
}

/* ==========================================================================
   SHARED: Section title styles for native headings/paragraphs
   ========================================================================== */

.iz-pattern-section .iz-sub-title {
    display: block;
    font-size: 22px;
    line-height: 22px;
    color: var(--primary-color);
    font-family: var(--title-font);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.iz-pattern-section .iz-h1-title {
    font-size: 80px;
    line-height: 90px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 14px;
}

.iz-pattern-section .iz-h2-title {
    font-size: 65px;
    line-height: 75px;
    color: var(--secondary-color);
    margin-bottom: 28px;
}

.iz-pattern-section .iz-h3-title {
    font-size: 50px;
    line-height: 60px;
    color: var(--secondary-color);
    margin-bottom: 0;
}

.iz-pattern-section .iz-body-lg {
    font-size: 18px;
    line-height: 28px;
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */

.iz-error-404-section {
    padding: 27px 0 var(--sec-space-120);
    text-align: center;
}

.iz-404-illustration {
    margin-bottom: 60px;
    text-align: center;
}

.iz-404-illustration img {
    width: 82.7%;
    height: auto;
    max-width: 900px;
    margin: 0 auto;
    display: block;
}

.iz-404-content {
    text-align: center;
}

.iz-404-title {
    font-size: 40px;
    line-height: 50px;
    color: var(--secondary-color);
    margin-bottom: 7px;
}

.iz-404-description {
    font-size: 18px;
    line-height: 28px;
    color: var(--common-color);
    margin-bottom: 0;
}

.iz-error-404-section .wp-block-kadence-advancedbutton {
    margin-top: 22px;
}

@media (max-width: 991px) {
    .iz-404-illustration {
        margin-bottom: 50px;
    }
    .iz-404-illustration img {
        width: 100%;
    }
    .iz-404-title {
        font-size: 32px;
        line-height: 42px;
    }
}

@media (max-width: 575px) {
    .iz-404-illustration {
        margin-bottom: 40px;
    }
    .iz-404-title {
        font-size: 26px;
        line-height: 34px;
    }
}

/* ==========================================================================
   NEWSLETTER CTA
   ========================================================================== */

.iz-newsletter-cta .newsletter-content .iz-sub-title {
    color: var(--white-color);
}

.iz-newsletter-cta .newsletter-content .iz-h3-title {
    color: var(--white-color);
}

/* ==========================================================================
   PAGE BANNER (inner pages)
   Kadence hybrid version uses .iz-page-banner-section (rowlayout wrapper).
   CPT hook still outputs raw .inner-banner HTML via kadence_after_header.
   ========================================================================== */

/* Break out of content container — only for CPT hook raw HTML output,
   NOT for Kadence rowlayout blocks (which use ::before for full-width bg). */
.entry-content > .inner-banner:not(.kb-row-layout-wrap) {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
}

/* Banner title — CPT hook path (raw .inner-banner HTML) */
.inner-banner .banner-content .h1-title {
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 1.15;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 5px;
    overflow-wrap: break-word;
}

/* Decorations container — absolutely positioned to fill the rowlayout */
.iz-page-banner-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Heading and breadcrumb above decorations */
.iz-page-banner-section .wp-block-kadence-advancedheading,
.iz-page-banner-section .banner-breadcrum {
    position: relative;
    z-index: 5;
}

/* Breadcrumb pill */
.banner-breadcrum {
    background-color: var(--primary-color);
    display: inline-block;
    padding: 8px 20px 7px;
    border-radius: 5px;
}

.banner-breadcrum ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.banner-breadcrum ul li,
.banner-breadcrum ul li a,
.banner-breadcrum ul li a:visited {
    color: var(--white-color) !important;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}

.banner-breadcrum ul li a:hover {
    opacity: 0.8;
}

/* ==========================================================================
   FAQ ACCORDIONS
   ========================================================================== */

.iz-faq-accordions .iz-faq-section {
    padding: var(--sec-space-120) 0;
}

.iz-faq-accordions .iz-section-title {
    margin-bottom: 50px;
}

.iz-faq-accordions .wp-block-details {
    background: var(--white-color);
    border-radius: var(--border-radius-10);
    padding: 20px 25px;
    margin-bottom: 15px;
    box-shadow: var(--box-shadow-1);
    border: none;
}

.iz-faq-accordions .wp-block-details summary {
    font-family: var(--title-font);
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: var(--secondary-color);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.iz-faq-accordions .wp-block-details summary::-webkit-details-marker {
    display: none;
}

.iz-faq-accordions .wp-block-details summary::after {
    content: "+";
    font-size: 24px;
    font-weight: 400;
    color: var(--primary-color);
    transition: var(--transition);
}

.iz-faq-accordions .wp-block-details[open] summary::after {
    content: "−";
}

.iz-faq-accordions .wp-block-details p {
    margin-top: 15px;
    color: var(--common-color);
}

.iz-faq-accordions .wp-block-image {
    margin-bottom: 20px;
    border-radius: var(--border-radius-10);
    overflow: hidden;
}

.iz-faq-accordions .wp-block-image img {
    border-radius: var(--border-radius-10);
}

/* ==========================================================================
   OUR FEATURES
   ========================================================================== */

/* Feature infoboxes — horizontal layout: circular icon left, text right */
.iz-feature-box .kt-blocks-info-box-link-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
}

.iz-feature-box .kt-blocks-info-box-media-container {
    flex-shrink: 0;
}

.iz-feature-box .kt-blocks-info-box-media {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white-color);
    box-shadow: var(--box-shadow-1);
}

.iz-feature-box .kt-blocks-info-box-title {
    font-size: 22px;
    line-height: 30px;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.iz-feature-box .kt-blocks-info-box-text {
    font-size: 15px;
    color: var(--common-color);
}

.iz-feature-box .kt-infobox-textcontent {
    text-align: left;
}

/* Strip Kadence card styling — only the circle icon gets shadow (like reference) */
.iz-feature-box {
    margin-bottom: 25px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

.iz-feature-box > .kt-blocks-info-box-link-wrap {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Global fix: center icons inside Kadence infobox circular media containers */
.iz-feature-box .kadence-info-box-image-inner-intrisic-container,
.iz-feature-box .kadence-info-box-image-intrisic,
.iz-feature-box .kadence-info-box-image-inner-intrisic,
.iz-skill-feature .kadence-info-box-image-inner-intrisic-container,
.iz-skill-feature .kadence-info-box-image-intrisic,
.iz-skill-feature .kadence-info-box-image-inner-intrisic {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   CONTACT FORM & MAP
   ========================================================================== */

/* --- Contact info cards row --- */
.iz-contact-info-row {
    padding: var(--sec-space-120) 0 0;
}

.iz-contact-info-row .kt-row-column-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Card — horizontal layout: icon left, text right */
.iz-contact-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.iz-contact-card > .kt-blocks-info-box-link-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px;
    padding: 22px 30px 24px;
    box-shadow: var(--box-shadow-1);
    border-radius: var(--border-radius-10);
    background-color: var(--white-color);
    transition: var(--transition);
    text-align: left;
    height: 100%;
}

.iz-contact-card > .kt-blocks-info-box-link-wrap:hover {
    box-shadow: 0 4px 60px -1px rgb(0 0 0 / 15%);
}

/* Icon — 50px fixed width */
.iz-contact-card .kt-blocks-info-box-media-container {
    flex: 0 0 auto;
    width: 50px;
    margin-top: 4px;
}

.iz-contact-card .kt-blocks-info-box-media {
    width: 50px;
    height: auto;
}

.iz-contact-card .kt-info-box-image {
    width: 50px;
    height: auto;
}

/* Text content */
.iz-contact-card .kt-infobox-textcontent {
    flex: 1 1 auto;
    text-align: left;
}

.iz-contact-card .kt-blocks-info-box-title {
    font-size: 22px !important;
    margin-bottom: 6px !important;
    color: var(--secondary-color);
}

.iz-contact-card .kt-blocks-info-box-text {
    color: rgb(102 102 102 / 80%);
    font-size: 15px;
    line-height: 1.7;
}

.iz-contact-card .kt-blocks-info-box-text a {
    display: block;
    color: rgb(102 102 102 / 80%);
}

.iz-contact-card .kt-blocks-info-box-text a:hover {
    color: var(--primary-color);
}

/* --- Form + Map section --- */
.iz-contact-form-map-row {
    padding: 40px 0 var(--sec-space-120);
}

.iz-contact-form-map-row .kt-row-column-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Map container */
.iz-contact-map-col .contact-us-map-box {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.786;
    border-radius: var(--border-radius-10);
    overflow: hidden;
}

.iz-contact-map-col .contact-us-map-box iframe {
    width: 100%;
    height: 100%;
}

/* Form column */
.iz-contact-form-col .kt-inside-inner-col {
    padding-left: 26px;
}

.iz-contact-form-col .iz-section-title {
    margin-bottom: 30px !important;
}

/* CF7 form styling — match reference .form-input / .sec-btn */
.iz-contact-form {
    margin-top: 10px;
}

.iz-contact-form .iz-cf7-row {
    display: flex;
    gap: 20px;
    margin-bottom: 0;
}

.iz-contact-form .iz-cf7-col {
    flex: 1;
}

.iz-contact-form input[type="text"],
.iz-contact-form input[type="email"],
.iz-contact-form input[type="tel"],
.iz-contact-form textarea {
    width: 100%;
    padding: 14px 20px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--border-radius-10);
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--common-color);
    background: var(--white-color);
    outline: none;
    transition: var(--transition);
    margin-bottom: 20px;
}

.iz-contact-form input:focus,
.iz-contact-form textarea:focus {
    border-color: var(--primary-color);
}

.iz-contact-form input::placeholder,
.iz-contact-form textarea::placeholder {
    color: #999;
}

.iz-contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.iz-contact-form input[type="submit"] {
    background-color: var(--primary-color);
    color: var(--white-color);
    border: none;
    border-radius: var(--border-radius-10);
    padding: 14px 40px;
    font-family: var(--title-font);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.iz-contact-form input[type="submit"]:hover {
    background-color: var(--secondary-color);
}

/* CF7 validation messages */
.iz-contact-form .wpcf7-not-valid-tip {
    font-size: 13px;
    color: #dc3545;
    margin-top: -16px;
    margin-bottom: 16px;
}

.iz-contact-form .wpcf7-response-output {
    border-radius: var(--border-radius-10);
    padding: 12px 20px;
    font-size: 14px;
}

/* ==========================================================================
   ABOUT COUNTERS
   ========================================================================== */

.iz-about-counters .iz-about-section {
    padding: var(--sec-space-120) 0;
}

.iz-about-counters .iz-section-title {
    margin-bottom: 20px;
}

.iz-about-counters .iz-about-description {
    margin-bottom: 30px;
    color: var(--common-color);
}

/* Feature boxes — two side by side, icon left + text right */
.iz-about-feature-box {
    display: inline-flex !important;
    width: calc(50% - 12px) !important;
    vertical-align: top;
    margin-bottom: 20px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

.iz-about-feature-box .kt-blocks-info-box-link-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

.iz-about-feature-box .kt-blocks-info-box-media-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iz-about-feature-box .kt-blocks-info-box-media {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--white-color, #fff);
    box-shadow: 0 4px 40px -1px rgb(0 0 0 / 15%);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Kadence wraps the media img in three nested "intrisic" divs that use a
   padding-bottom aspect-ratio hack and collapse to height:0. That pulls the
   img to the top-left of the circle. Replace the hack with flex centering. */
.iz-about-feature-box .kadence-info-box-image-inner-intrisic-container,
.iz-about-feature-box .kadence-info-box-image-intrisic,
.iz-about-feature-box .kadence-info-box-image-inner-intrisic {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
}

.iz-about-feature-box .kt-info-box-image,
.iz-about-feature-box .kt-blocks-info-box-media img,
.iz-about-feature-box .kt-blocks-info-box-media svg {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

.iz-about-feature-box .kt-blocks-info-box-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--secondary-color);
    margin-bottom: 5px;
}

.iz-about-feature-box .kt-blocks-info-box-text {
    color: var(--common-color);
    font-size: 16px;
}

/* Override Kadence center alignment — feature text should be left-aligned */
.iz-about-feature-box .kt-blocks-info-box-link-wrap,
.iz-about-feature-box .kt-infobox-textcontent {
    text-align: left;
}

/* ==========================================================================
   SKILLS PROGRESS
   ========================================================================== */

.iz-skills-section {
    padding: var(--sec-space-120) 0;
    background-color: var(--bg-color);
}

.iz-skills-section .iz-section-title {
    margin-bottom: 20px;
}

/* Progress bars column — vertically centered */
.iz-skills-bars-col {
    align-self: center;
}

/* Feature boxes — 2x2 grid inside the text column */
.iz-skills-text-col .kt-inside-inner-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Eyebrow, title, and description span full width */
.iz-skills-text-col .iz-section-eyebrow,
.iz-skills-text-col .iz-section-title,
.iz-skills-text-col .wp-block-kadence-advancedheading:not(.iz-section-eyebrow):not(.iz-section-title) {
    grid-column: 1 / -1;
}

/* Feature infoboxes — icon left, text right. Kadence adds margin: 0 15px on
   the media container by default — zero it out so the check sits close to
   the text. Gap on the wrap controls the actual spacing. */
.iz-skill-feature .kt-blocks-info-box-link-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    padding: 16px 20px !important;
}

.iz-skill-feature .kt-blocks-info-box-media-container {
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    width: 26px;
    height: 26px;
}

/* Force the icon wrappers to proper box dimensions — Kadence's intrinsic
   aspect-ratio hack collapses them to height:0 and pulls the img above the
   card, clipping it against the card's top edge. */
.iz-skill-feature .kt-blocks-info-box-media {
    margin: 0 !important;
    padding: 0 !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.iz-skill-feature .kadence-info-box-image-inner-intrisic-container,
.iz-skill-feature .kadence-info-box-image-intrisic,
.iz-skill-feature .kadence-info-box-image-inner-intrisic {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
}

.iz-skill-feature .kt-info-box-image,
.iz-skill-feature .kt-blocks-info-box-media img {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    object-fit: contain;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

.iz-skill-feature .kt-blocks-info-box-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 4px;
}

.iz-skill-feature .kt-blocks-info-box-text {
    font-size: 14px;
    color: var(--common-color);
}

.iz-skill-feature .kt-infobox-textcontent {
    text-align: left;
}

/* ==========================================================================
   INSTRUCTOR CARDS — 3-column grid
   ========================================================================== */

.iz-instructor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: var(--global-calc-content-width, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 991px) {
    .iz-instructor-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .iz-instructor-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BLOG CARDS (homepage section — native wp:query)
   ========================================================================== */

/* Query wrapper — may not render on all pages */
.iz-blog-cards-query {
    max-width: var(--global-calc-content-width, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px 20px;
}

/* Enforce 3-col grid — the editor may strip the layout attribute on save */
.iz-blog-cards-query .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
}

@media (max-width: 991px) {
    .iz-blog-cards-query .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .iz-blog-cards-query .wp-block-post-template {
        grid-template-columns: 1fr;
    }
}

/* Post template rendered directly in entry-content (no query wrapper) */
.entry-content > .wp-block-post-template {
    max-width: var(--global-calc-content-width, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ==========================================================================
   BLOG ARCHIVE
   ========================================================================== */

.iz-blog-archive {
    padding: var(--sec-space-120) 0;
}

.iz-blog-archive .wp-block-post-template {
    list-style: none;
    padding: 0;
}

.iz-blog-card {
    background: var(--white-color);
    border-radius: var(--border-radius-10);
    overflow: hidden;
    box-shadow: var(--box-shadow-1);
    padding: 30px 30px 22px;
    height: 100%;
    transition: var(--transition);
}

.iz-blog-card:hover {
    box-shadow: 0 4px 60px -1px rgb(0 0 0 / 15%);
}

.iz-blog-card .wp-block-post-featured-image {
    margin-bottom: 27px;
    border-radius: var(--border-radius-10);
    overflow: hidden;
}

.iz-blog-card .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.747;
    object-fit: cover;
    transform: scale(1);
    transition: var(--transition);
}

.iz-blog-card:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

.iz-blog-card .wp-block-post-date {
    font-size: 14px;
    color: var(--primary-color);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.iz-blog-card .wp-block-post-date::before {
    content: "\f073";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 14px;
}

.iz-blog-card .wp-block-post-title {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 8px;
}

.iz-blog-card .wp-block-post-title a {
    color: var(--secondary-color) !important;
    text-decoration: none;
    transition: var(--transition);
}

.iz-blog-card .wp-block-post-title a:hover {
    color: var(--primary-color) !important;
}

.iz-blog-card .wp-block-post-excerpt {
    font-size: 15px;
    line-height: 24px;
    color: var(--common-color);
    margin-bottom: 15px;
}

.iz-blog-card .wp-block-post-excerpt__more-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

.iz-blog-card .wp-block-post-excerpt__more-text::after {
    content: "";
    position: relative;
    width: 30px;
    height: 1px;
    display: inline-block;
    background-color: currentColor;
    transition: var(--transition);
    left: 0;
}

.iz-blog-card .wp-block-post-excerpt__more-text:hover::after {
    left: 3px;
}

.iz-blog-archive .wp-block-query-pagination {
    margin-top: 40px;
    gap: 10px;
}

.iz-blog-archive .wp-block-query-pagination-numbers .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: var(--border-radius-10);
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
    background: var(--white-color);
    border: 1px solid var(--border-color, #E0E0E0);
    text-decoration: none;
    transition: var(--transition);
}

.iz-blog-archive .wp-block-query-pagination-numbers .page-numbers.current,
.iz-blog-archive .wp-block-query-pagination-numbers .page-numbers:hover {
    background: var(--gradient-color);
    color: var(--white-color);
    border-color: transparent;
}

@media (max-width: 991px) {
    .iz-blog-card {
        padding: 20px 20px 14px;
    }
}

@media (max-width: 575px) {
    .iz-blog-card .wp-block-post-title {
        font-size: 18px;
        line-height: 26px;
    }
}

/* ==========================================================================
   BLOG SINGLE
   ========================================================================== */

.iz-blog-single {
    padding: var(--sec-space-120) 0;
}

.iz-blog-single .wp-block-post-featured-image {
    margin-bottom: 27px;
    border-radius: var(--border-radius-10);
    overflow: hidden;
    aspect-ratio: 1 / 0.542;
}

.iz-blog-single .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: var(--transition);
}

.iz-blog-single .wp-block-post-featured-image:hover img {
    transform: scale(1.05);
}

.iz-blog-single .iz-post-meta {
    gap: 30px;
    margin-bottom: 17px;
    font-size: 14px;
    color: var(--common-color);
}

.iz-blog-single .iz-post-meta .wp-block-post-date {
    color: var(--primary-color);
}

.iz-blog-single .iz-post-meta .wp-block-post-author-name {
    color: var(--common-color);
}

.iz-blog-single .wp-block-post-title {
    font-size: 40px;
    line-height: 50px;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.iz-blog-single .wp-block-post-content p {
    margin-bottom: 20px;
    line-height: 1.8;
}

.iz-blog-single .wp-block-post-content h3,
.iz-blog-single .wp-block-post-content h4 {
    color: var(--secondary-color);
    margin-top: 30px;
    margin-bottom: 10px;
}

.iz-blog-single .wp-block-post-content blockquote,
.iz-blog-single .wp-block-post-content .wp-block-quote {
    background: var(--bg-color);
    border-left: 4px solid var(--primary-color);
    padding: 25px 30px;
    margin: 30px 0;
    border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
}

.iz-blog-single .wp-block-post-content blockquote p,
.iz-blog-single .wp-block-post-content .wp-block-quote p {
    font-size: 18px;
    font-weight: 500;
    font-style: italic;
    color: var(--secondary-color);
    margin-bottom: 0;
}

.iz-blog-single .wp-block-post-terms {
    margin-top: 25px;
    font-size: 14px;
}

.iz-blog-single .wp-block-post-terms a {
    display: inline-block;
    padding: 6px 16px;
    background: var(--bg-color);
    border-radius: var(--border-radius-10);
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    margin-right: 5px;
    margin-bottom: 5px;
}

.iz-blog-single .wp-block-post-terms a:hover {
    background: var(--gradient-color);
    color: var(--white-color);
}

.iz-blog-single .iz-divider {
    margin: 40px 0;
    border-color: var(--border-color, #E0E0E0);
}

.iz-blog-single .wp-block-comments {
    margin-top: 40px;
}

.iz-blog-single .wp-block-comments > h2 {
    font-size: 30px;
    color: var(--secondary-color);
    margin-bottom: 30px;
}

.iz-blog-single .wp-block-comment-template > li {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-color, #E0E0E0);
}

.iz-blog-single .wp-block-comment-template > li:last-child {
    border-bottom: none;
}

.iz-blog-single .wp-block-avatar img {
    border-radius: 50%;
    width: 70px !important;
    height: 70px !important;
    object-fit: cover;
}

.iz-blog-single .wp-block-comment-author-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 4px;
}

.iz-blog-single .wp-block-comment-author-name a {
    color: var(--secondary-color);
    text-decoration: none;
}

.iz-blog-single .wp-block-comment-date {
    font-size: 13px;
    color: var(--common-color);
    margin-bottom: 10px;
}

.iz-blog-single .wp-block-comment-content p {
    font-size: 15px;
    line-height: 24px;
    color: var(--common-color);
}

.iz-blog-single .wp-block-comment-reply-link a {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.iz-blog-single .wp-block-comment-reply-link a:hover {
    color: var(--secondary-color);
}

.iz-blog-single .wp-block-post-comments-form {
    margin-top: 50px;
}

.iz-blog-single .comment-respond .comment-reply-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 25px;
}

.iz-blog-single .comment-respond .comment-form input[type="text"],
.iz-blog-single .comment-respond .comment-form input[type="email"],
.iz-blog-single .comment-respond .comment-form input[type="url"],
.iz-blog-single .comment-respond .comment-form textarea {
    width: 100%;
    height: 50px;
    padding: 14px 20px;
    border: 1px solid var(--border-color, #E0E0E0);
    border-radius: var(--border-radius-10);
    font-size: 15px;
    outline: none;
    transition: var(--transition);
    background: var(--white-color);
}

.iz-blog-single .comment-respond .comment-form textarea {
    height: 120px;
    resize: none;
}

.iz-blog-single .comment-respond .comment-form input:focus,
.iz-blog-single .comment-respond .comment-form textarea:focus {
    border-color: var(--primary-color);
}

.iz-blog-single .comment-respond .comment-form .form-submit .submit {
    background: var(--gradient-color);
    color: var(--white-color);
    border: none;
    border-radius: var(--border-radius-10);
    padding: 18px 32px;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.iz-blog-single .comment-respond .comment-form .form-submit .submit:hover {
    background: var(--secondary-color);
}

@media (max-width: 991px) {
    .iz-blog-single .wp-block-post-title {
        font-size: 32px;
        line-height: 42px;
    }
}

@media (max-width: 575px) {
    .iz-blog-single .wp-block-post-title {
        font-size: 26px;
        line-height: 34px;
    }
    .iz-blog-single .wp-block-avatar img {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ==========================================================================
   RESPONSIVE OVERRIDES
   ========================================================================== */

@media (max-width: 1199px) {
    .iz-pattern-section .iz-h1-title {
        font-size: 55px;
        line-height: 60px;
    }
    .iz-pattern-section .iz-h2-title {
        font-size: 50px;
        line-height: 55px;
    }
    .iz-pattern-section .iz-h3-title {
        font-size: 40px;
        line-height: 45px;
    }
    .iz-page-banner-section .iz-banner-title,
    .iz-page-banner .iz-banner-title {
        font-size: 55px;
        line-height: 60px;
    }
}

@media (max-width: 991px) {
    .iz-pattern-section .iz-h1-title {
        font-size: 45px;
        line-height: 55px;
    }
    .iz-pattern-section .iz-h2-title {
        font-size: 40px;
        line-height: 50px;
    }
    .iz-pattern-section .iz-h3-title {
        font-size: 35px;
        line-height: 40px;
    }
    .iz-pattern-section .iz-sub-title {
        font-size: 18px;
        line-height: 18px;
    }
    .iz-pattern-section .wp-block-button.iz-sec-btn .wp-block-button__link {
        font-size: 13px;
        padding: 16px 28px;
    }
    .iz-page-banner-section .iz-banner-title,
    .iz-page-banner .iz-banner-title {
        font-size: 45px;
        line-height: 55px;
    }
    /* Hero — stack columns on tablet */
    .iz-hero-section .kt-row-column-wrap {
        flex-wrap: wrap;
    }
    .iz-hero-section .kt-row-column-wrap > .wp-block-kadence-column {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .iz-hero-wrapper {
        padding: 80px 0 60px;
    }
    .iz-hero-col-text .kt-inside-inner-col {
        padding-top: 0;
    }
    .iz-hero-col-text .iz-hero-heading {
        margin-bottom: 18px;
    }
}

@media (max-width: 767px) {
    .iz-hero-wrapper {
        padding: 48px 0 36px;
    }
    .iz-hero-col-text .iz-hero-eyebrow {
        font-size: 14px !important;
        margin-bottom: 10px;
    }
    .iz-hero-col-text .iz-hero-description {
        margin-bottom: 24px;
    }
    .iz-hero-section .kb-button {
        padding: 14px 24px !important;
        font-size: 14px;
    }
}

@media (max-width: 479px) {
    .iz-hero-wrapper {
        padding: 32px 0 28px;
    }
    .iz-hero-col-text .iz-hero-heading {
        margin-bottom: 14px;
    }
}

@media (max-width: 767px) {
    .iz-pattern-section .iz-h2-title {
        font-size: 32px;
        line-height: 38px;
    }
    .iz-pattern-section .iz-h3-title {
        font-size: 28px;
        line-height: 34px;
    }
    .iz-page-banner-section .iz-banner-title,
    .iz-page-banner .iz-banner-title {
        font-size: 35px;
        line-height: 45px;
    }
}

@media (max-width: 575px) {
    .iz-pattern-section .iz-h1-title {
        font-size: 35px;
        line-height: 45px;
    }
    .iz-pattern-section .iz-h2-title {
        font-size: 28px;
        line-height: 34px;
    }
    .iz-pattern-section .iz-h3-title {
        font-size: 24px;
        line-height: 30px;
    }
    .iz-page-banner-section .iz-banner-title,
    .iz-page-banner .iz-banner-title {
        font-size: 28px;
        line-height: 38px;
    }
}

/* ==========================================================================
   COURSE ARCHIVE
   ========================================================================== */

.iz-course-archive {
    padding: var(--sec-space-120) 0;
}

.iz-course-archive .iz-h2-title {
    font-family: var(--title-font);
    font-size: 50px;
    line-height: 60px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 40px;
}

.iz-course-filters {
    margin-bottom: 40px;
}

.iz-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.iz-filter-btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: var(--border-radius-10);
    font-size: 15px;
    font-weight: 500;
    color: var(--secondary-color);
    background: var(--white-color);
    border: 1px solid var(--border-color, #E0E0E0);
    transition: var(--transition);
    text-decoration: none !important;
}

.iz-filter-btn:hover,
.iz-filter-btn.active {
    background: var(--gradient-color);
    color: var(--white-color);
    border-color: transparent;
}

.iz-course-archive .wp-block-post-template {
    gap: 24px;
}

.iz-course-card {
    height: 100%;
    padding: 30px 30px 26px;
    background: var(--white-color);
    border-radius: var(--border-radius-10);
    box-shadow: var(--box-shadow-1);
    transition: var(--transition);
}

.iz-course-card:hover {
    box-shadow: 0 4px 60px -1px rgb(0 0 0 / 15%);
    transform: translateY(-5px);
}

.iz-course-card .wp-block-post-featured-image {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: var(--border-radius-10);
}

.iz-course-card .wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 1 / 0.64606741573;
    object-fit: cover;
    border-radius: var(--border-radius-10);
    transform: scale(1);
    transition: var(--transition);
}

.iz-course-card:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

.iz-course-card .wp-block-post-title {
    font-family: var(--title-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.iz-course-card .wp-block-post-title a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: var(--transition);
}

.iz-course-card .wp-block-post-title a:hover {
    color: var(--primary-color);
}

.iz-course-card .wp-block-post-excerpt {
    font-size: 15px;
    line-height: 24px;
    color: var(--common-color);
    margin-bottom: 0;
}

.iz-course-card .wp-block-post-excerpt__excerpt {
    margin-bottom: 0;
}

.iz-course-archive .wp-block-query-pagination {
    margin-top: 40px;
    gap: 8px;
}

.iz-course-archive .wp-block-query-pagination-numbers .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--border-radius-10);
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
    background: var(--white-color);
    box-shadow: var(--box-shadow-1);
    transition: var(--transition);
    text-decoration: none;
}

.iz-course-archive .wp-block-query-pagination-numbers .page-numbers.current,
.iz-course-archive .wp-block-query-pagination-numbers .page-numbers:hover {
    background: var(--gradient-color);
    color: var(--white-color);
}

.iz-course-archive .wp-block-query-pagination-previous,
.iz-course-archive .wp-block-query-pagination-next {
    padding: 10px 20px;
    border-radius: var(--border-radius-10);
    font-size: 15px;
    color: var(--secondary-color);
    background: var(--white-color);
    box-shadow: var(--box-shadow-1);
    transition: var(--transition);
    text-decoration: none;
}

.iz-course-archive .wp-block-query-pagination-previous:hover,
.iz-course-archive .wp-block-query-pagination-next:hover {
    background: var(--gradient-color);
    color: var(--white-color);
}

.iz-course-archive .wp-block-query-no-results {
    padding: 60px 20px;
    text-align: center;
    font-size: 18px;
    color: var(--common-color);
}

/* ==========================================================================
   COURSE SINGLE
   ========================================================================== */

.iz-course-single {
    padding: var(--sec-space-120) 0;
}

.iz-course-single .iz-course-featured-image {
    margin-bottom: 30px;
    border-radius: var(--border-radius-10);
    overflow: hidden;
}

.iz-course-single .iz-course-featured-image img {
    width: 100%;
    aspect-ratio: 1 / 0.60240963;
    object-fit: cover;
    border-radius: var(--border-radius-10);
    transform: scale(1);
    transition: var(--transition);
}

.iz-course-single .iz-course-featured-image:hover img {
    transform: scale(1.05);
}

.iz-course-single .wp-block-post-featured-image {
    margin-bottom: 30px;
    border-radius: var(--border-radius-10);
    overflow: hidden;
}

.iz-course-single .wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 1 / 0.60240963;
    object-fit: cover;
}

.iz-course-single .iz-course-title,
.iz-course-single .wp-block-post-title {
    font-family: var(--title-font);
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.iz-course-single .wp-block-post-content {
    font-size: 16px;
    line-height: 28px;
    color: var(--common-color);
}

.iz-course-single .wp-block-post-content p {
    margin-bottom: 18px;
}

.iz-course-sidebar {
    background: var(--white-color);
    border-radius: var(--border-radius-10);
    box-shadow: var(--box-shadow-1);
    padding: 30px;
    position: sticky;
    top: 130px;
}

.iz-sidebar-heading {
    font-family: var(--title-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--bg-color);
}

.iz-course-meta-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-color);
    font-size: 15px;
    color: var(--common-color);
}

.iz-course-meta-item:last-child {
    border-bottom: none;
}

.iz-course-meta-item i {
    width: 24px;
    font-size: 16px;
    color: var(--primary-color);
    margin-right: 10px;
    flex-shrink: 0;
}

.iz-meta-label {
    font-weight: 600;
    color: var(--secondary-color);
    margin-right: 8px;
}

.iz-meta-value {
    margin-left: auto;
    font-weight: 500;
    color: var(--common-color);
}

.iz-course-meta-item:first-child .iz-meta-value {
    font-family: var(--title-font);
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}

.iz-enroll-btn-wrap {
    margin: 20px 0;
}

.iz-enroll-btn-wrap .iz-enroll-btn {
    display: block;
    width: 100%;
    text-align: center;
}

.iz-course-instructor-link {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--bg-color);
}

.iz-course-instructor-link a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--secondary-color);
    text-decoration: none;
    transition: var(--transition);
}

.iz-course-instructor-link a:hover {
    color: var(--primary-color);
}

.iz-course-instructor-link .iz-instructor-thumb {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.iz-course-instructor-link .iz-instructor-name {
    font-weight: 600;
}

.iz-course-instructor-link .iz-instructor-role {
    font-size: 13px;
    color: var(--common-color);
}

.iz-related-heading {
    font-family: var(--title-font);
    font-weight: 700;
    color: var(--secondary-color);
}

.iz-related-courses .wp-block-post-template {
    gap: 24px;
}

/* Author + rating row in course detail */
.iz-course-single .post-author-review-info {
    border-top: none;
    padding-top: 0;
    margin-bottom: 21px;
}

/* Category tag above title */
.iz-course-single .post-tag {
    margin-bottom: 21px;
}

/* Related courses — full-card grid */
.related-courses-wp {
    padding-top: var(--sec-space-60);
}

.related-courses-wp .sec-title {
    margin-bottom: 40px;
}

.related-courses-wp .h3-title {
    font-size: 30px;
    line-height: 40px;
}

.iz-related-courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.iz-related-courses-grid .col-xl-4 {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 991px) {
    .iz-course-archive .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .iz-course-single .iz-course-title,
    .iz-course-single .wp-block-post-title {
        font-size: 32px;
        line-height: 42px;
    }
    .iz-course-single-layout {
        flex-direction: column !important;
    }
    .iz-course-single-layout .wp-block-column {
        flex-basis: 100% !important;
    }
    .iz-course-sidebar {
        position: static;
    }
    .iz-related-courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .iz-course-archive .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }
    .iz-course-archive .iz-h2-title {
        font-size: 36px;
        line-height: 46px;
    }
    .iz-course-card {
        padding: 20px;
    }
    .iz-related-courses .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }
    .iz-course-single .iz-course-title,
    .iz-course-single .wp-block-post-title {
        font-size: 26px;
        line-height: 36px;
    }
    .iz-related-courses-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   INSTRUCTOR SINGLE — two-column bio + courses section
   ========================================================================== */

.iz-instructor-single-layout {
    padding: var(--sec-space-120) 0;
}

/* Featured image — target the WP block class directly */
.iz-instructor-single-layout .wp-block-post-featured-image {
    border-radius: var(--border-radius-10);
    overflow: hidden;
    margin: 0;
}

.iz-instructor-single-layout .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.24;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

.iz-instructor-single-layout .wp-block-post-featured-image:hover img {
    transform: scale(1.05);
}

/* Also support custom class if applied */
.iz-instructor-single-layout .instructor-detail-image {
    border-radius: var(--border-radius-10);
    overflow: hidden;
}

/* Role from [iz_instructor_meta] */
.iz-instructor-single-layout .iz-instructor-meta {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* Rating row */
.instructor-rating-wp {
    display: flex;
    align-items: center;
    gap: 38px;
    margin-bottom: 35px;
}

.instructor-rating-box .post-review-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.instructor-rating-box .post-review-info span {
    display: inline-block;
}

.instructor-rating-box .post-review-text span {
    color: var(--secondary-color);
}

.instructor-rating-wp .star-group {
    display: inline-flex;
    gap: 2px;
    color: #FFC107;
}

.instructor-rating-wp .studebnt-detail-info span {
    display: inline-block;
    color: var(--secondary-color);
    font-weight: 600;
}

/* Contact section */
.instructor-contact-detail {
    margin-top: 30px;
    margin-bottom: 30px;
}

.instructor-contact-detail .h4-title {
    margin-bottom: 9px;
}

.instructor-contact-detail ul {
    display: flex;
    gap: 38px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.instructor-contact-icon {
    --size: 40px;
    width: var(--size);
    height: var(--size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    border-radius: 50%;
    flex-shrink: 0;
    transition: var(--transition);
}

.instructor-contact-icon img {
    width: 19px;
    height: 19px;
    display: block;
}

.instructor-contact-detail ul li a:hover .instructor-contact-icon {
    background-color: var(--primary-color);
}

.instructor-contact-detail ul li a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--common-color);
    text-decoration: none;
}

.instructor-contact-detail ul li a:hover {
    color: var(--primary-color);
}

/* Social icons */
.iz-instructor-social {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.iz-instructor-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-color);
    color: var(--secondary-color);
    font-size: 16px;
    text-decoration: none;
    transition: var(--transition);
}

.iz-instructor-social a:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

/* Courses-by-instructor section below bio */
.choose-our-top-courses-sec {
    padding-bottom: var(--sec-space-120);
}

.choose-our-top-courses-sec .sec-title {
    margin-bottom: 50px;
}

/* Responsive */
@media (max-width: 991px) {
    .instructor-rating-wp {
        margin-bottom: 25px;
    }
}

@media (max-width: 767px) {
    .iz-instructor-single-layout .wp-block-post-featured-image img {
        aspect-ratio: auto;
    }

    .instructor-contact-detail ul {
        flex-direction: column;
        gap: 15px;
    }
}

/* ==========================================================================
   ACADEMIC PROGRAMS
   ========================================================================== */

/* Academic heading block — just top padding + gray bg, NO extra bottom space.
   Reference puts heading+cards in one section; we split into two Kadence blocks.
   Move the overlap padding/margin to the cards grid block. */
.iz-academic-programs {
    padding-top: var(--sec-space-120);
    padding-bottom: 0;
    background-color: var(--bg-color);
    text-align: center;
}

/* Make heading use proper section title size */
.iz-academic-programs .iz-section-heading {
    font-size: 50px !important;
    line-height: 60px !important;
    font-weight: 700 !important;
    color: var(--secondary-color) !important;
    margin-bottom: 10px !important;
}

/* Kill Kadence default wrap padding to tighten heading → cards gap */
.iz-academic-programs .kt-row-column-wrap {
    padding-bottom: 0 !important;
}
.iz-academic-grid .kt-row-column-wrap {
    padding-top: 0 !important;
}

/* Cards grid — continues the gray background and owns the overlap spacing */
.iz-academic-grid {
    --extra-space-bottom: 160px;
    --sec-space-bottom: var(--sec-space-120);
    padding-bottom: calc(var(--extra-space-bottom) + var(--sec-space-bottom));
    margin-bottom: calc(var(--extra-space-bottom) * -1);
    background-color: var(--bg-color);
}

.iz-academic-grid .kt-row-column-wrap {
    gap: 24px;
}

/* Academic cards — image with overlapping white title card */
.iz-academic-card .kt-inside-inner-col {
    position: relative;
}

.iz-academic-card .iz-academic-image {
    border-radius: var(--border-radius-10);
    overflow: hidden;
    margin-bottom: 0 !important;
}

.iz-academic-card .iz-academic-image img {
    width: 100%;
    transition: var(--transition);
}

.iz-academic-card:hover .iz-academic-image img {
    transform: scale(1.05);
}

/* Title + CTA form overlapping white card */
.iz-academic-card .iz-academic-title {
    background: var(--white-color);
    width: calc(100% - 60px);
    margin: -50px auto 0 !important;
    padding: 20px 25px 8px !important;
    border-radius: var(--border-radius-10) var(--border-radius-10) 0 0;
    position: relative;
    text-align: center;
    font-size: 20px !important;
}

.iz-academic-card .iz-academic-cta {
    background: var(--white-color);
    width: calc(100% - 60px);
    margin: 0 auto !important;
    padding: 0 25px 18px !important;
    border-radius: 0 0 var(--border-radius-10) var(--border-radius-10);
    text-align: center;
    box-shadow: var(--box-shadow-1);
}

/* Style button as text link like reference */
.iz-academic-card .iz-academic-cta .kb-button {
    background: transparent !important;
    color: var(--primary-color) !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600;
    border: none !important;
    box-shadow: none !important;
    text-transform: uppercase;
}

/* ==========================================================================
   IZ GRID SYSTEM
   ========================================================================== */

.iz-section-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

.iz-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.iz-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.iz-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.iz-grid-auto-center {
    max-width: 83.33%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1199px) {
    .iz-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .iz-grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .iz-grid-2col,
    .iz-grid-3col,
    .iz-grid-4col {
        grid-template-columns: 1fr;
    }
    .iz-grid-auto-center {
        max-width: 100%;
    }
}

/* ==========================================================================
   EVENT SINGLE
   ========================================================================== */

.iz-event-single {
    padding: var(--sec-space-120) 0;
}

.iz-event-single .wp-block-post-featured-image {
    margin-bottom: 30px;
    border-radius: var(--border-radius-10);
    overflow: hidden;
    aspect-ratio: 1 / 0.602;
}

.iz-event-single .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: var(--transition);
}

.iz-event-single .wp-block-post-featured-image:hover img {
    transform: scale(1.05);
}

.iz-event-single .wp-block-post-title {
    font-size: 40px;
    line-height: 50px;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.iz-event-single .wp-block-post-content {
    margin-top: 20px;
}

.iz-event-single .wp-block-post-content p {
    margin-bottom: 20px;
    line-height: 1.8;
}

.iz-event-sidebar {
    background: var(--white-color);
    border-radius: var(--border-radius-10);
    box-shadow: var(--box-shadow-1);
    padding: 24px 30px 30px;
    position: sticky;
    top: 130px;
}

.iz-event-sidebar .iz-sidebar-heading {
    font-size: 22px;
    color: var(--secondary-color);
    margin-bottom: 11px;
}

.iz-event-sidebar .iz-sidebar-desc {
    font-size: 15px;
    color: var(--common-color);
    margin-bottom: 18px;
}

.iz-event-sidebar .iz-course-meta-item {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color, #E0E0E0);
}

.iz-event-sidebar .iz-course-meta-item:last-of-type {
    border-bottom: none;
    margin-bottom: 10px;
}

.iz-event-sidebar .iz-course-meta-item .iz-meta-label {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    color: var(--common-color);
}

.iz-event-sidebar .iz-course-meta-item .iz-meta-value {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    color: var(--secondary-color);
}

.iz-event-sidebar .iz-course-meta-item i {
    width: 20px;
    color: var(--primary-color);
    margin-right: 8px;
}

.iz-event-sidebar .wp-block-kadence-advancedbutton {
    margin-top: 25px;
}

.iz-event-sidebar .kb-button {
    width: 100%;
    justify-content: center;
}

@media (max-width: 991px) {
    .iz-event-single .wp-block-post-title {
        font-size: 32px;
        line-height: 42px;
    }
    .iz-event-sidebar {
        padding: 14px 20px 20px;
        position: static;
    }
}

@media (max-width: 575px) {
    .iz-event-single .wp-block-post-title {
        font-size: 26px;
        line-height: 34px;
    }
}

/* ==========================================================================
   HOMEPAGE MOBILE FIXES
   ========================================================================== */

/* Category cards: 2-col with compact cards between 480–575px */
@media (max-width: 575px) {
    .iz-category-cards-row:not(:has(.kt-row-column-wrap)),
    .iz-category-cards-row .kt-row-column-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .iz-category-card .kt-inside-inner-col {
        padding: 16px 14px;
        grid-template-columns: 38px 1fr;
        column-gap: 12px;
    }
    .iz-category-card .category-list-icon,
    .iz-category-card .category-list-icon img {
        width: 38px;
        height: 42px;
    }
    .iz-category-card h4,
    .iz-category-card .wp-block-kadence-advancedheading {
        font-size: 15px;
        line-height: 20px;
    }
    .iz-category-card p {
        font-size: 13px;
    }
}

/* Category cards: single column below 480px — prevents title word-splitting */
@media (max-width: 479px) {
    .iz-category-cards-row:not(:has(.kt-row-column-wrap)),
    .iz-category-cards-row .kt-row-column-wrap {
        grid-template-columns: 1fr !important;
    }
    .iz-category-card .kt-inside-inner-col {
        grid-template-columns: 50px 1fr;
        column-gap: 19px;
        padding: 20px 22px;
    }
    .iz-category-card .category-list-icon,
    .iz-category-card .category-list-icon img {
        width: 50px;
        height: 55px;
    }
    .iz-category-card h4,
    .iz-category-card .wp-block-kadence-advancedheading {
        font-size: 18px;
        line-height: 24px;
    }
    .iz-category-card p {
        font-size: 15px;
    }
}

/* About feature boxes: full width on mobile to avoid word splitting */
@media (max-width: 767px) {
    .iz-about-feature-box {
        width: 100% !important;
        display: flex !important;
    }
}

/* Counters: 2x2 grid instead of single column on mobile */
@media (max-width: 575px) {
    .about-counter-row {
        --width: 50% !important;
        justify-content: center !important;
        margin-bottom: 40px;
    }
}

/* Contact form: remove left padding when stacked on mobile */
@media (max-width: 991px) {
    .iz-contact-form-col .kt-inside-inner-col {
        padding-left: 0;
    }
}

/* Events: single column on mobile instead of 2x2 */
@media (max-width: 991px) {
    .kt-post-loopkbev0004 .kt-post-grid-wrap {
        grid-template-columns: 1fr !important;
    }
}

/* Learn & Grow skill feature boxes: stack in column on mobile */
@media (max-width: 575px) {
    .iz-skills-text-col .kt-inside-inner-col {
        grid-template-columns: 1fr !important;
    }
}

/* Newsletter: single column on mobile */
@media (max-width: 767px) {
    .iz-newsletter-section .iz-newsletter-content .kt-inside-inner-col {
        grid-template-columns: 1fr !important;
    }
    .iz-newsletter-section .iz-newsletter-form {
        grid-column: 1;
        grid-row: auto;
    }
    .iz-newsletter-section .iz-newsletter-heading {
        font-size: 30px !important;
        line-height: 38px !important;
    }
    .iz-newsletter-section .kt-row-column-wrap {
        padding: 40px 30px 35px;
    }
}

/* ==========================================================================
   #4 — HOMEPAGE COURSE QUERY LOOP (native wp:query + Block Bindings)
   Maps the core-block card DOM to the Courseshub card design. Scoped to
   .iz-course-grid (the post-template) so it never touches the legacy PHP
   cards used on archive/blog pages.
   ========================================================================== */

.iz-course-grid.is-layout-grid {
    gap: 25px;
}

/* Center both homepage query grids within the full-width content.
   WP's post-template layout resets the margins, so force centering + max-width. */
.iz-course-grid-query .iz-course-grid,
.iz-instructor-grid-query .iz-instructor-grid {
    max-width: var(--global-calc-content-width, 1320px);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
}
.iz-course-grid .iz-course-card {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Featured image — reproduce the old .post-image look */
.iz-course-grid .post-image-box-wp {
    position: relative;
    margin-bottom: 27px;
}
.iz-course-grid .wp-block-post-featured-image {
    width: 100% !important;        /* override the image's fixed 356px width so it fills the card */
    max-width: 100%;
    margin: 0;
    border-radius: var(--border-radius-10);
    overflow: hidden;
    aspect-ratio: 1 / 0.646;
}
.iz-course-grid .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.iz-course-grid .iz-course-card:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

/* Category badge (core/post-terms) */
.iz-course-grid .wp-block-post-terms.post-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 25px;
    color: var(--white-color);
    background-color: var(--primary-color);
    padding: 3px 20px 2px;
    border-radius: 30px;
}
.iz-course-grid .wp-block-post-terms.post-tag a {
    color: var(--white-color);
    text-decoration: none;
}

/* Lessons + duration row — paragraphs with icons via ::before */
.iz-course-grid .post-lessons-info {
    gap: 24px;
    margin-bottom: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.iz-course-grid .post-lessons-info .post-info-text {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    color: var(--common-color);
}
.iz-course-grid .post-info-text::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 20px;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.iz-course-grid .iz-qc-lessons::before {
    background-image: url(../images/book-icon.svg);
}
.iz-course-grid .iz-qc-duration::before {
    background-image: url(../images/clock-icon.svg);
}

/* Title — navy heading, not the orange link default */
.iz-course-grid .wp-block-post-title {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.3;
}
.iz-course-grid .wp-block-post-title a,
.iz-course-grid .wp-block-post-title a:visited {
    color: var(--secondary-color) !important; /* override Kadence palette link color */
    text-decoration: none;
    transition: var(--transition);
}
.iz-course-grid .wp-block-post-title a:hover {
    color: var(--primary-color) !important;
}

/* Price — large orange */
.iz-course-grid .course-price {
    margin: 0 0 21px;
    font-size: 22px;
    font-weight: 700;
    font-family: var(--title-font);
    color: var(--primary-color);
}

/* Author + rating footer — divider, pinned to card bottom */
.iz-course-grid .post-author-review-info {
    margin-top: auto;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid rgb(25 37 75 / 10%);
    align-items: center;
}
.iz-course-grid .post-author-info {
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
}
.iz-course-grid .post-author-image.iz-qc-avatar {
    width: 35px;
    height: 35px;
    margin: 0;
    border-radius: 100%;
    overflow: hidden;
    flex: 0 0 auto;
}
.iz-course-grid .post-author-image.iz-qc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.iz-course-grid .post-author-name {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    font-family: var(--title-font);
    color: var(--secondary-color);
}
.iz-course-grid .post-review-info {
    gap: 5px;
    align-items: center;
    flex-wrap: nowrap;
}
.iz-course-grid .iz-qc-star {
    margin: 0;
    color: var(--yellow-color);
    line-height: 1;
}
.iz-course-grid .iz-qc-rating,
.iz-course-grid .iz-qc-reviews {
    margin: 0;
    font-size: 15px;
    color: var(--common-color);
}

/* ==========================================================================
   #4 — HOMEPAGE INSTRUCTOR QUERY LOOP (native wp:query + core/post-meta)
   Reuses the legacy .instructor-box design; maps the core-block DOM to it.
   ========================================================================== */

/* post-template <ul> reuses the existing .iz-instructor-grid 3-col grid */
.iz-instructor-grid {
    list-style: none;
}
.iz-instructor-grid > li {
    margin: 0;
}

/* Portrait fills the .instructor-image-box aspect box */
.iz-instructor-grid .instructor-image-box .wp-block-post-featured-image {
    margin: 0;
    height: 100%;
}
.iz-instructor-grid .instructor-image-box .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.iz-instructor-grid .instructor-box:hover .instructor-image-box .wp-block-post-featured-image img {
    transform: scale(1.05);
}

/* Name (post-title) — navy, not the orange link default */
.iz-instructor-grid .instructor-text .wp-block-post-title {
    margin: 0 0 2px;
    font-size: 20px;
    line-height: 1.3;
}
.iz-instructor-grid .instructor-text .wp-block-post-title a,
.iz-instructor-grid .instructor-text .wp-block-post-title a:visited {
    color: var(--secondary-color) !important;
    text-decoration: none;
    transition: var(--transition);
}
.iz-instructor-grid .instructor-text .wp-block-post-title a:hover {
    color: var(--primary-color) !important;
}

/* Role — reuse legacy .instructor-profession (orange); reset paragraph margin */
.iz-instructor-grid .instructor-text .instructor-profession {
    margin: 0;
}