/*
Theme Name: HPP Child
Template: hello-elementor
*/
/* Resets --------------------------------------------- */
 .elementor-image-carousel-wrapper .swiper-wrapper, .elementor-image-carousel-wrapper .swiper-slide {
     transition-timing-function: linear !important;
}
 body, .elementor {
     margin: 0;
     padding: 0;
     border: 0;
     font-family: "forma-djr-deck", sans-serif;
     font-weight: 500;
     font-style: normal;
}
 h1, h2, h3, h4, h5, h6, blockquote {
     color: var(--text-heading);
}
 a:hover, a:active {
     color: inherit;
}
 button:focus, input:focus {
     outline: none !important;
}
 .acf-map {
     width: 100%;
     height: 400px;
     border: #ccc solid 1px;
     margin: 20px 0;
}
 .elementor-element p:last-child {
     margin-bottom: 0px;
}
 body table tbody>tr:nth-child(odd)>td, body table tbody>tr:nth-child(odd)>th, body table tbody tr:hover>td, body table tbody tr:hover>th {
     background-color: initial;
}
 body table td, body table th {
     border: 0;
     padding: 0;
     text-align: left;
}
 .elementor-field-group .elementor-field-textual:focus {
     box-shadow: none;
}
/* Fixes potential theme css conflict. */
 .acf-map img {
     max-width: inherit !important;
}
 a {
     cursor: pointer;
     color: inherit;
}
 select {
     appearance: none;
     -webkit-appearance: none;
}
 ::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder, body .elementor-field-group .elementor-field-textual::placeholder {
     opacity: 1;
}
 body .elementor-column-gap-default>.elementor-column>.elementor-element-populated {
     padding: 0;
}
 .elementor .elementor-heading-title {
     line-height: inherit;
}
 .animate-words .word {
     opacity: 0;
}
/* Global Font Styles --------------------------------------------- */
/* Desktop font sizes */
 :root {
     --siteheadings-eyebrow: 1.25rem;
     --blogheadings-h1: 0;
     --blogheadings-h2: 0;
     --blogheadings-h3: 0;
     --blogheadings-h4: 0;
     --siteheadings-display: 6rem;
     --siteheadings-h1: 3.75rem;
     --siteheadings-h2: 2.5rem;
     --siteheadings-h3: 2rem;
     --siteheadings-h4: 1.5rem;
     --siteheadings-h5: 1.625rem;
     --body-body-lg: 1.25rem;
     --body-body-md: 1rem;
     --body-body-sm: 1rem;
     --body-body-xsm: 0.75rem;
     --component-testimonial: 0;
     --component-blockquote: 0;
     --component-button-buttonlg: 1rem;
     --component-button-buttondefault: 1.13rem;
     --component-button-buttonsm: 0.875rem;
     --component-nav: 0;
     --component-submenu: 0;
     --component-tag: 0;
}
/* Tablet font sizes */
 @media all and (max-width:1440px) {
     :root {
         --siteheadings-eyebrow: 1.125rem;
         --blogheadings-h1: 0;
         --blogheadings-h2: 0;
         --blogheadings-h3: 0;
         --blogheadings-h4: 0;
         --siteheadings-display: 3rem;
         --siteheadings-h1: 2.6rem;
         --siteheadings-h2: 2.3rem;
         --siteheadings-h3: 1.5rem;
         --siteheadings-h4: 1.25rem;
         --siteheadings-h5: 1.25rem;
         --body-body-lg: 1.125rem;
         --body-body-md: 1rem;
         --body-body-sm: 1rem;
         --body-body-xsm: 0.75rem;
         --component-testimonial: 0;
         --component-blockquote: 0;
         --component-button-buttonlg: 0.875rem;
         --component-button-buttondefault: 0.875rem;
         --component-button-buttonsm: 0.75rem;
         --component-nav: 0;
         --component-submenu: 0;
         --component-tag: 0;
    }
}
/* Tablet Portrait font sizes - Keeping this breakpoint as it was in the original CSS */
 @media all and (max-width:900px) {
     :root {
         --siteheadings-display: 3rem;
    }
}
/* Mobile font sizes */
 @media all and (max-width:767px) {
     :root {
         --siteheadings-display: 2.8rem;
         --siteheadings-h1: 2.2rem;
         --siteheadings-h2: 1.8rem;
         --siteheadings-h3: 1.5rem;
         --siteheadings-h4: 1.25rem;
         --siteheadings-h5: 1.25rem;
         --body-body-lg: 1.125rem;
         --body-body-md: 1rem;
         --body-body-sm: 1rem;
    }
}
 .elementor .text-display {
     font-size: var(--siteheadings-display, 6rem);
     font-style: normal;
     font-weight: 500;
     line-height: 1.1em;
}
/* Unused class in the original CSS */
 .elementor .text-cta {
     font-size: var(--siteheadings-cta);
     line-height: 1em;
}
 .text-h1, h1, .elementor h1.elementor-heading-title, .elementor .text-h1 {
     font-size: var(--siteheadings-h1, 3.75rem);
     font-style: normal;
     font-weight: 500;
     line-height: 1.1em;
}
 .text-h2, h2, .elementor h2.elementor-heading-title, .elementor .text-h2 {
     font-size: var(--e-global-typography-02d4dac-font-size);
     font-weight: var(--e-global-typography-02d4dac-font-weight);
     line-height: var(--e-global-typography-02d4dac-line-height);
     letter-spacing: var(--e-global-typography-02d4dac-letter-spacing);
}
 .text-h3, h3, .elementor h3.elementor-heading-title, .elementor .text-h3 {
     font-size: var(--e-global-typography-4d351e3-font-size);
     font-weight: var(--e-global-typography-4d351e3-font-weight);
     line-height: var(--e-global-typography-4d351e3-line-height);
     letter-spacing: var(--e-global-typography-4d351e3-letter-spacing);
}
 .text-h4, h4, .elementor h4.elementor-heading-title, .elementor .text-h4 {
     font-size: var(--siteheadings-h4, 1.5rem);
     font-style: normal;
     font-weight: 500;
     line-height: 1.5em;
}
 .text-h5, h5, .elementor h5.elementor-heading-title, .elementor .text-h5 {
     font-size: var(--siteheadings-h5, 1.625rem);
     font-style: normal;
     font-weight: 500;
     line-height: 1.4em;
}
 h6, .text-body-large, .elementor h6.elementor-heading-title, .elementor .text-body-large, .text-blog-styles > .elementor-widget-container > p:first-child, .elementor .elementor-widget-n-accordion .e-n-accordion-item-title-text, .e-n-tabs .e-n-tab-title-text, .elementor-field-group .elementor-select-wrapper select {
     font-size: var(--e-global-typography-c84be62-font-size);
     font-weight: var(--e-global-typography-c84be62-font-weight);
     line-height: var(--e-global-typography-c84be62-line-height);
     letter-spacing: var(--e-global-typography-c84be62-letter-spacing);
}
 .text-body-medium, body, .elementor .text-body-medium, .elementor .elementor-widget-woocommerce-cart .woocommerce .product-name a {
     font-size: var(--e-global-typography-b13963e-font-size);
     font-weight: var(--e-global-typography-b13963e-font-weight);
     line-height: var(--e-global-typography-b13963e-line-height);
     letter-spacing: var(--e-global-typography-b13963e-letter-spacing);
}
 .text-body-small, .elementor .text-body-small, .elementor-widget-woocommerce-cart .woocommerce table.cart td span {
     font-size: var(--e-global-typography-2673feb-font-size);
     font-weight: var(--e-global-typography-2673feb-font-weight);
     line-height: var(--e-global-typography-2673feb-line-height);
}
 .text-body-xsmall, .elementor .text-body-xsmall {
     font-size: var(--body-body-xsm, 0.75rem);
     font-style: normal;
     font-weight: 400;
     line-height: 1.5em;
}
 .text-button, .elementor-button, .elementor .text-button, .elementor [type=submit], .elementor [type=button]{
     font-size: var(--component-button-buttondefault);
     font-style: normal;
     font-weight: 500;
     line-height: normal;
}
 .text-button.large, .elementor .text-button.large {
     font-size: var(--component-button-buttonlg);
     font-style: normal;
     font-weight: 500;
     line-height: normal;
}
 .text-button.small, .elementor .text-button.small {
     font-size: var(--component-button-buttonsm);
     font-style: normal;
     font-weight: 500;
     line-height: normal;
}
 .text-caption, .elementor .text-caption {
     font-size: var(--body-body-sm, 1rem);
     font-style: normal;
     font-weight: 400;
     line-height: 1.5em;
}
 .text-footnote, .elementor .text-footnote {
     font-size: 0.75rem;
     font-style: normal;
     font-weight: 500;
     line-height: 1.5em;
     text-transform: uppercase;
}
 .text-body-large.bold, .text-body-medium.bold, .text-body-small.bold, .text-body-xsmall.bold, .elementor .text-body-large.bold, .elementor .text-body-medium.bold, .elementor .text-body-small.bold, .elementor .text-body-xsmall.bold, .e-n-tabs .e-n-tab-title-text {
     font-weight: 600;
}
/* Color Variables --------------------------------------------- */
 :root {
     --black: #000;
     --white: #fff;
     --text-heading: #242324;
     --text-body: #242324;
     --text: #242324;
    /* Brand */
     --navy: #192F50;
     --yellow: #FDCA00;
     --surface-subtle: #F9FAFB;
     --border: #E8EAEE;
    /* Global Fonts */
     --bodyFont:"Inter", serif;
     --titleFont:"Inter", serif;
}
/* Gradient Variables --------------------------------------------- */
/* Primary Spacing Variables --------------------------------------------- */
 :root {
     --spacing-4px-2: 2px;
     --spacing-4px-4: 4px;
     --spacing-4px-8: 8px;
     --spacing-4px-12: 12px;
     --spacing-4px-16: 16px;
     --spacing-4px-20: 20px;
     --spacing-4px-24: 24px;
     --spacing-4px-32: 32px;
     --spacing-4px-40: 40px;
     --spacing-4px-48: 48px;
     --spacing-4px-56: 56px;
     --spacing-4px-64: 64px;
     --spacing-4px-80: 80px;
     --spacing-4px-96: 96px;
     --spacing-4px-128: 128px;
     --spacing-4px-160: 160px;
     --spacing-4px-192: 192px;
     --spacing-4px-224: 224px;
     --spacing-4px-256: 256px;
     --spacing-4px-320: 320px;
     --spacing-4px-384: 384px;
     --spacing-4px-512: 512px;
     --spacing-4px-full: 999px;
}
/* Global Sizing Variables --------------------------------------------- */
 :root {
    /* The BASE size */
     --base-size: 4px;
    /* The size steps */
     --size-0: calc(var(--base-size) * 0);
    /* 0px */
     --size-1: calc(var(--base-size) * 1);
    /* 4px */
     --size-2: calc(var(--base-size) * 2);
    /* 8px */
     --size-3: calc(var(--base-size) * 3);
    /* 12px */
     --size-4: calc(var(--base-size) * 4);
    /* 16px */
     --size-5: calc(var(--base-size) * 5);
    /* 20px */
     --size-6: calc(var(--base-size) * 6);
    /* 24px */
     --size-7: calc(var(--base-size) * 7);
    /* 28px */
     --size-8: calc(var(--base-size) * 8);
    /* 32px */
     --size-9: calc(var(--base-size) * 9);
    /* 36px */
     --size-10: calc(var(--base-size) * 10);
    /* 40px */
     --size-11: calc(var(--base-size) * 11);
    /* 44px */
     --size-12: calc(var(--base-size) * 12);
    /* 48px */
     --size-14: calc(var(--base-size) * 14);
    /* 56px */
     --size-16: calc(var(--base-size) * 16);
    /* 64px */
     --size-20: calc(var(--base-size) * 20);
    /* 80px */
     --size-24: calc(var(--base-size) * 24);
    /* 96px */
     --size-28: calc(var(--base-size) * 28);
    /* 112px */
     --size-32: calc(var(--base-size) * 32);
    /* 128px */
     --size-36: calc(var(--base-size) * 36);
    /* 144px */
     --size-40: calc(var(--base-size) * 40);
    /* 160px */
     --size-44: calc(var(--base-size) * 44);
    /* 176px */
     --size-48: calc(var(--base-size) * 48);
    /* 192px */
     --size-52: calc(var(--base-size) * 52);
    /* 208px */
     --size-56: calc(var(--base-size) * 56);
    /* 224px */
     --size-60: calc(var(--base-size) * 60);
    /* 240px */
     --size-64: calc(var(--base-size) * 64);
    /* 256px */
     --size-72: calc(var(--base-size) * 72);
    /* 288px */
     --size-80: calc(var(--base-size) * 80);
    /* 320px */
     --size-96: calc(var(--base-size) * 96);
    /* 384px */
}
/* Global Configuration --------------------------------------------- */
/* Extra size helper for fractional sizes */
 :root {
     --size-0\.5: calc(var(--base-size) * 0.5);
    /* 2px */
}
/* Global Configuration - DESKTOP */
 :root {
    /* From mockup */
     --page-width: 1664px;
     --hero-height: 900px;
    /* Section Padding */
     --section-padding-smaller: var(--size-16);
     --section-padding: var(--size-32);
     --section-padding-larger: var(--size-48);
     --section-padding-sides: var(--size-8);
    /* Component Padding */
     --cp-3xs: var(--size-1);
     --cp-2xs: var(--size-2);
     --cp-xs: var(--size-3);
     --cp-s: var(--size-4);
     --cp-m: var(--size-5);
     --cp-l: var(--size-8);
     --cp-xl: var(--size-12);
     --cp-2xl: var(--size-16);
     --cp-3xl: var(--size-24);
     --cp-4xl: var(--size-32);
    /* Component Vertical Padding */
     --cp-v-none: 0;
     --cp-v-xsm: var(--size-1);
     --cp-v-sm: var(--size-2);
     --cp-v-md: var(--size-3);
     --cp-v-lg: var(--size-6);
     --cp-v-xlg: var(--size-8);
     --cp-v-heading-padding: var(--size-16);
    /* Column Spacing */
     --column-sm: var(--size-16);
     --column-md: var(--size-24);
     --column-lg: var(--size-32);
    /* Radius */
     --radius-xs: var(--size-0.5);
     --radius-s: var(--size-1);
     --radius-m: var(--size-2);
     --radius-l: var(--size-3);
     --radius-xl: var(--size-4);
     --radius-full: 999px;
    /* Button Elements */
     --button-height-default: var(--size-14);
     --button-padding-default: var(--size-8);
     --button-height-large: var(--size-16);
     --button-padding-large: var(--size-8);
     --button-height-small: var(--size-10);
     --button-padding-small: var(--size-5);
     --button-radius: var(--radius-m);
    /* Other Elements */
     --menu-padding-v: var(--size-8);
}
 @media all and (max-width:1750px){
     :root {
         --section-padding-sides: var(--size-24);
    }
}
/* TABLET */
 @media all and (max-width: 1440px) {
     :root {
        /* From mockup - changed values */
         --page-width: 1024px;
         --hero-height: 700px;
        /* Section Padding - changed values */
         --section-padding-smaller: var(--size-12);
         --section-padding: var(--size-24);
         --section-padding-larger: var(--size-40);
         --section-padding-sides: var(--size-24);
        /* Component Padding - changed values */
         --cp-3xs: var(--size-0.5);
         --cp-2xs: var(--size-1);
         --cp-xs: var(--size-2);
         --cp-s: var(--size-3);
         --cp-m: var(--size-4);
         --cp-l: var(--size-5);
         --cp-xl: var(--size-8);
         --cp-2xl: var(--size-12);
         --cp-3xl: var(--size-16);
         --cp-4xl: var(--size-24);
        /* Component Vertical Padding - changed values */
         --cp-v-sm: var(--size-1);
         --cp-v-md: var(--size-2);
         --cp-v-lg: var(--size-4);
         --cp-v-xlg: var(--size-6);
         --cp-v-heading-padding: var(--size-12);
        /* Column Spacing - changed values */
         --column-sm: var(--size-12);
         --column-md: var(--size-16);
         --column-lg: var(--size-24);
        /* Button Elements - changed values */
         --button-height-default: var(--size-12);
         --button-padding-default: var(--size-6);
         --button-height-large: var(--size-14);
         --button-padding-large: var(--size-6);
         --button-height-small: var(--size-8);
         --button-padding-small: var(--size-4);
         --button-radius: var(--radius-s);
        /* Other Elements - changed values */
         --menu-height: var(--size-20);
    }
}
 @media (max-width:1200px) {
     :root {
         --section-padding-sides:var(--size-16);
         --section-padding:var(--size-16);
    }
}
/* MOBILE */
 @media all and (max-width: 767px) {
     :root {
        /* From mockup - changed values */
         --page-width: 375px;
        /* Section Padding - changed values */
         --section-padding-smaller: var(--size-10);
         --section-padding: var(--size-14);
         --section-padding-larger: var(--size-16);
         --section-padding-sides: var(--size-8);
        /* Component Padding - changed values */
         --cp-4xl: var(--size-20);
        /* Component Vertical Padding - changed values */
         --cp-v-xsm: var(--size-0.5);
         --cp-v-lg: var(--size-3);
         --cp-v-xlg: var(--size-4);
         --cp-v-heading-padding: var(--size-8);
        /* Column Spacing - changed values */
         --column-sm: var(--size-10);
         --column-md: var(--size-12);
         --column-lg: var(--size-20);
        /* Button Elements - changed values */
         --button-radius: var(--size-1);
        /* Other Elements - changed values */
         --menu-height: var(--size-14);
    }
}
/* Section Padding --------------------------------------------- */
 .section-padding-small {
     padding: var(--section-padding-smaller) var(--section-padding-sides);
}
 .section-padding {
     padding: var(--section-padding) var(--section-padding-sides);
}
 .section-padding-large {
     padding: var(--section-padding-larger) var(--section-padding-sides);
}
 .section-padding.top {
     padding-bottom: 0;
}
 .section-padding.bottom {
     padding-top: 0;
}
 .section-padding.sides-only {
     padding-top: 0;
     padding-bottom: 0;
}
 .header-offset {
     margin-top: 142px;
}
@media all and (max-width:1200px){
	.header-offset {
		 margin-top: 102px;
	}
}
@media all and (max-width:900px){
	.header-offset {
		 margin-top: 85px;
	}
}
@media all and (max-width:767px){
	.header-offset {
		 margin-top: 102px;
	}
}
/* Buttons --------------------------------------------- */
 .elementor-button {
     text-transform: uppercase;
}
/* Eyebrows --------------------------------------------- */
 .eyebrow {
     display: flex;
     padding: 14px;
     justify-content: center;
     align-items: center;
     gap: 10px;
     border-radius: 2px;
     background: #FBFAF8;
     text-transform: uppercase;
     display: inline-block;
     margin-right: auto;
}
/* Hero Banner --------------------------------------------- */
 .hero-banner {
     padding: var(--cp-l) var(--cp-2xl) var(--cp-2xl);
     min-height: 100vh;
}
 .hero-banner-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
     background: #00000070;
	 opacity: 0.8;
}
 .hero-banner-svg {
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
     max-width: 1500px;
     width: auto;
}
@media all and (max-width:900px){
	 .hero-banner-svg {
		 max-width: 80vw;
	}
	.hero-banner {
         max-height: 720px !important;
		min-height: 720px;
    }
}
 @media all and (max-width:767px){
     .hero-banner {
         padding: var(--section-padding) var(--section-padding-sides);
    }
}
/* Case Study Grid --------------------------------------------- */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.case-study-grid .case-study-card {
    min-height: 200px;
    aspect-ratio: 1.5625;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}
.case-study-grid .case-study-card:before {
    content: '';
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: 0.4s ease;
}
.case-study-grid .case-study-card:hover:before {
    opacity: 1;
    transition: 0.4s ease;
}
.case-study-grid .card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--cp-l);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transition: 0.4s ease;
}
.case-study-grid .card-content * {
    color: #fff;
    margin: 0;
}
.case-study-grid .case-study-card:hover .card-content {
    opacity: 1;
    transition: 0.6s ease;
}
.case-study-grid .video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    cursor: pointer;
}
.fancybox__content>.f-button {
    padding: 0;
    transform: translate(0, 100%);
}
@media all and (max-width:1440px){
    .case-study-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body:not(.page-id-163) .case-study-grid .case-study-card:nth-child(n+3) {
        display: none;
    }
}
@media all and (max-width:1200px){
    .case-study-grid {
        grid-template-columns: repeat(2, 1fr);
    }
	.case-study-grid .case-study-card {
        aspect-ratio: auto;
        min-height: 40vh;
    }
    .case-study-grid .case-study-card .card-content,
	.case-study-grid .case-study-card:before {
        opacity: 1;
    }
}

@media all and (max-width:900px){
	.case-study-grid {
        grid-template-columns: repeat(1, 1fr);
		grid-gap: 24px;
    }
}
@media all and (max-width:767px){
	.case-study-grid .case-study-card:nth-child(n+2) {
        display: initial;
    }
	.case-study-grid .case-study-card {
        min-height: 50vh;
    }
}

/* Testimonial Carousel --------------------------------------------- */
.testimonial-carousel-wrapper {
    position: relative;
}
.testimonial-carousel {
    margin: 0 calc(var(--cp-xl) / -2);
}
.testimonial-slide {
    padding: 0 calc(var(--cp-xl) / 2);
    height: auto;
    display: flex !important;
}
.testimonial-card {
    background: #fff;
    padding: var(--cp-xl);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    height: 100%;
    width: 100%;
	min-height: 440px;
}
.testimonial-content {
    position: relative;
}
.testimonial-card .content-top p {
	font-style: italic;
}
.testimonial-card .content-visible:before {
    content: '"';
    font-size: 174px;
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    transform: translate(-23px, 34px);
    z-index: 0;
    opacity: 0.1;
}
.content-hidden {
    display: none;
    opacity: 0;
}
.read-more-toggle {
    display: inline-block;
    margin-top: 10px;
    color: #5d6853;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}
.read-more-toggle:hover {
    color: #000;
}
.testimonial-card .content-bottom {
    display: flex;
    align-items: center;
    gap: var(--cp-l);
    margin-top: auto;
}
.testimonial-card .content-bottom p {
    margin: 0px;
}
.testimonial-card .content-bottom p:first-child {
    margin-bottom: var(--cp-2xs);
}
.testimonial-card .image-wrapper {
    width: 100px;
    height: 100px;
    position: relative;
}
.testimonial-card .image-wrapper img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.testimonial-nav {
    display: flex;
    gap: 10px;
    margin-top: var(--cp-l);
}
.testimonial-nav a {
    font-size: 40px;
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}
.testimonial-nav a:hover {
    color: #5d6853;
}
.testimonial-nav a.slick-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.testimonial-card .content-hidden p {
    margin-top: 0.9rem;
}


/* FAQ Accordions --------------------------------------------- */
.faq-accordion-container {
    display: flex;
    gap: 64px;
    margin: 20px 0;
}

.faq-column {
    flex: 1;
}

.faq-item {
    background: #FBFAF8;
    margin-bottom: 8px;
    border-radius: 2px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 20px;
    background: transparent;
    border: none;
    text-align: left;
    font-family: 'Forma DJR Deck', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 1.1px;
    color: #242324;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    transition: background-color 0.3s ease;
}

.faq-icon {
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 1.1px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-content {
    padding: 0 20px 20px 20px;
}

.faq-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .faq-accordion-container {
        flex-direction: column;
        gap: 0;
    }
    
    .faq-column {
        width: 100%;
    }
}



/* Video Gallery Elementor Widget --------------------------------------------- */
.video-gallery-widget {
    display: flex;
    gap: 32px;
}

.video-gallery-widget[data-single="true"] {
    display: block;
}

.video-gallery-widget[data-single="true"] .video-player-container {
    width: 100%;
}

.video-sidebar {
    background: #fefefd;
    padding: 32px;
    border-radius: 2px;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 560px;
    height: 100%;
    max-height: 530px; /* Set max height */
    align-self: stretch;
}

.video-item {
    background: #fbfaf8;
    padding: 16px;
    border-radius: 2px;
    display: flex;
    gap: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.video-item.active {
    background: #f3f4f1;
}

.video-item:hover {
    background: #f3f4f1;
}

.video-thumbnail {
    width: 120px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 2px;
    overflow: hidden;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-content {
    flex: 1;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.video-title {
    margin: 0;
}

.video-player-container {
    flex: 1;
    border-radius: 2px;
    overflow: hidden;
    background: #000;
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
    max-height: 666px; /* Set max height */
}

#video-player-container [id^="video-player-"] {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}

/* Responsive */
@media (max-width: 1024px) {
    .video-gallery-widget {
        flex-direction: column;
        gap: 16px;
    }
    
    .video-sidebar {
        width: 100%;
        max-height: 300px;
        height: auto;
        align-self: auto;
    }
    
    .video-player-container {
        width: 100%;
        max-height: none; /* Remove max-height constraint on mobile */
    }
}

@media (max-width: 768px) {
    .video-item {
        gap: 16px;
    }
    .video-sidebar {
        padding: 8px;
    }
    
    .video-thumbnail {
        width: 80px;
        height: 45px;
    }
}

/* Scrollbar styling for sidebar */
.video-sidebar::-webkit-scrollbar {
    width: 6px;
}

.video-sidebar::-webkit-scrollbar-track {
    background: #f3f4f1;
    border-radius: 3px;
}

.video-sidebar::-webkit-scrollbar-thumb {
    background: #242324;
    border-radius: 3px;
    opacity: 0.3;
}



/* Case Study Outputs Shortcode --------------------------------------------- */
.output-grid {
    display: flex;
    align-items: flex-start;
    gap: var(--Component-Padding-cp-l, 32px);
    align-self: stretch;
}

.output-item {
    display: flex;
    padding: var(--cp-2xl) var(--cp-xl);
    flex-direction: column;
    align-items: center;
    gap: 32px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 2px;
    background: #FBFAF8;
    text-align: center;
    align-content: center;
}