/*
Theme Name: Sales Cardio
Template: hello-elementor

SETUP CHECKLIST FOR NEW SITES:
================================
1. Update color variables (search for "TODO: UPDATE THESE")
   - Update --brand-primary, --brand-secondary, --brand-accent

2. Update font families (search for "TODO: UPDATE THESE")
   - Update --bodyFont and --titleFont with your brand fonts

3. Set up Elementor Global Fonts
   - Go to Elementor > Site Settings > Global Fonts
   - Create/configure: Display, H1-H5, Body Large/Medium/Small, Button, Caption

4. Copy Elementor typography IDs to this stylesheet
   - Inspect page to find --e-global-typography-XXXXXXX IDs
   - Replace all "XXXXXXX" placeholders in text classes (search for "XXXXXXX")

5. Update button styles with brand colors (search for "TODO: Update button")

6. Review utility classes and add any project-specific ones

7. Test responsive breakpoints and adjust if needed

See THEME-DOCUMENTATION.md for detailed instructions.
*/


/* ============================================
   FONT FACE DECLARATIONS
   ============================================ */

/* RBNo2.1a Font Family - Loaded from /fonts/ directory
   Used for: Display, H1, H2 headings
   ============================================ */

@font-face {
    font-family: 'RBNo2.1a';
    src: url('fonts/RBNo2.1a-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RBNo2.1a';
    src: url('fonts/RBNo2.1a-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RBNo2.1a';
    src: url('fonts/RBNo2.1a-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Note: Inter and Inconsolata are loaded via Google Fonts in Elementor
   Family names: 'Inter' and 'Inconsolata'
   ============================================ */


/* ============================================
   RESETS & DIRECT FONT OVERRIDES
   ============================================ */

body,
.elementor {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--white);
	font-family: 'Inter', var(--bodyFont), sans-serif;
}

.site-header {
	display: none;
}

/* Display & Headline Font Overrides - RBNo2.1a Bold
   Apply to all display and heading elements
   ============================================ */

/* Display XL - Large Statistics */
.text-display-xl,
.text-stat-large {
	font-family: 'RBNo2.1a', var(--titleFont), sans-serif !important;
    font-weight: 700;
}

/* Display & H1 - Hero Headlines */
h1,
.text-display,
.text-h1,
.elementor h1,
.elementor h1.elementor-heading-title,
.elementor .text-display,
.elementor .text-h1 {
	font-family: 'RBNo2.1a', var(--titleFont), sans-serif !important;
    font-weight: 700;
}

/* H2 - Major Section Headlines */
h2,
.text-h2,
.elementor h2,
.elementor h2.elementor-heading-title,
.elementor .text-h2 {
	font-family: 'RBNo2.1a', var(--titleFont), sans-serif !important;
    font-weight: 700;
}

/* Body & Standard Headings - Inter Regular
   Apply to H3-H6 and body text
   ============================================ */

/* H3-H6 use Inter */
h3, h4, h5, h6,
.text-h3, .text-h4, .text-h5,
.elementor h3, .elementor h4, .elementor h5, .elementor h6,
.elementor h3.elementor-heading-title,
.elementor h4.elementor-heading-title,
.elementor h5.elementor-heading-title,
.elementor h6.elementor-heading-title {
	font-family: 'Inter', var(--bodyFont), sans-serif !important;
    font-weight: 400;
}

/* Body text classes */
p,
.text-body-large,
.text-body-medium,
.text-body-small,
.elementor p,
.elementor .text-body-large,
.elementor .text-body-medium,
.elementor .text-body-small {
	font-family: 'Inter', var(--bodyFont), sans-serif !important;
}

/* Buttons use Inter */
.text-button,
.elementor-button,
button,
input[type="submit"],
input[type="button"],
.elementor .text-button,
.elementor .elementor-button {
	font-family: 'Inter', var(--bodyFont), sans-serif !important;
}

/* Eyebrow / Caption / Label text - Inconsolata Semi-Bold
   ============================================ */
.text-eyebrow,
.text-caption,
.text-tag,
.elementor .text-eyebrow,
.elementor .text-caption,
.elementor .text-tag {
	font-family: 'Inconsolata', monospace !important;
    font-weight: 600;
    text-transform: uppercase;
}

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;
}


@media (max-width: 766px) {
    .floating-card-carousel {
        overflow: hidden;
        width: 100%;
    }
    
    .floating-card-carousel .slick-track {
        display: flex;
    }
    
    .floating-card-carousel .slick-slide {
        box-sizing: border-box;
        width: 100%;
    }
    
    .floating-card-carousel .floating-card {
        position: relative;
        top: unset;
        left: unset;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
	.floating-card-carousel .floating-card {
        position: relative;
    }
	.floating-card-carousel .slick-slide {
        margin: 0 6px;
    }
    
    .floating-card-carousel .slick-list {
        margin: 0 -6px;
    }	
}


/* Global Font Styles
--------------------------------------------- */

/* Desktop font sizes - Sales Cardio Design System
 * NOTE: These should align with your Elementor Global Fonts configuration
 */
:root {
    --heading-eyebrow: 1rem;          /* 16px - Inconsolata Semi-Bold */
    --heading-display-xl: 11.25rem;   /* 180px - Large statistics */
    --heading-display: 7.5rem;        /* 120px - Hero headlines (H1) */
    --heading-h1: 7.5rem;             /* 120px - RBNo2.1a Bold */
    --heading-h2: 5rem;               /* 80px - RBNo2.1a Bold */
    --heading-h3: 3rem;               /* 48px - Inter Regular */
    --heading-h4: 2rem;               /* 32px - Inter Regular */
    --heading-h5: 1.5rem;             /* 24px - Inter Regular */
    --body-body-lg: 1.25rem;          /* 20px - Inter Regular */
    --body-body-md: 1rem;             /* 16px - Inter Regular */
    --body-body-sm: 0.875rem;         /* 14px - Inter Regular */
    --body-body-xsm: 0.75rem;         /* 12px */
    --component-testimonial: 0;
    --component-blockquote: 0;
    --component-button-buttonlg: 1.125rem;     /* 18px - Button text */
    --component-button-buttondefault: 1.125rem; /* 18px */
    --component-button-buttonsm: 0.875rem;     /* 14px */
    --component-nav: 0;
    --component-submenu: 0;
    --component-tag: 0;

    /* Accordion Cards Animation Properties */
    --accordion-expanded-height: 530px;
    --accordion-collapsed-height: 120px;
    --accordion-transition-duration: 400ms;
    --accordion-content-fade-duration: 250ms;
}

/* Tablet font sizes - @1440px breakpoint */
@media all and (max-width:1440px) {
    :root {
        --heading-eyebrow: 0.875rem;       /* 14px - UPDATED */
        --heading-display-xl: 7.5rem;      /* 120px */
        --heading-display: 5rem;           /* 80px */
        --heading-h1: 5rem;                /* 80px */
        --heading-h2: 3.5rem;              /* 56px - UPDATED */
        --heading-h3: 2.25rem;             /* 36px - UPDATED */
        --heading-h4: 1.75rem;             /* 28px */
        --heading-h5: 1.375rem;            /* 22px - UPDATED */
        --body-body-lg: 1.125rem;          /* 18px */
        --body-body-md: 1rem;              /* 16px */
        --body-body-sm: 0.875rem;          /* 14px */
        --body-body-xsm: 0.75rem;          /* 12px */
        --component-testimonial: 0;
        --component-blockquote: 0;
        --component-button-buttonlg: 1rem;        /* 16px */
        --component-button-buttondefault: 1rem;   /* 16px */
        --component-button-buttonsm: 0.875rem;    /* 14px */
        --component-nav: 0;
        --component-submenu: 0;
        --component-tag: 0;
    }
}

/* Tablet Portrait font sizes - @900px breakpoint */
@media all and (max-width:900px) {
    :root {
        --heading-display-xl: 6rem;        /* 96px - UPDATED */
        --heading-display: 4rem;           /* 64px */
        --heading-h1: 4rem;                /* 64px */
        --heading-h2: 2.75rem;             /* 44px - UPDATED */
        --heading-h3: 2rem;                /* 32px - UPDATED */
        --heading-h4: 1.5rem;              /* 24px - UPDATED */
        --heading-h5: 1.25rem;             /* 20px - UPDATED */
    }
}

/* Mobile font sizes - @767px breakpoint */
@media all and (max-width:767px) {
    :root {
        --heading-display-xl: 4.5rem;      /* 72px - UPDATED */
        --heading-display: 3rem;           /* 48px */
        --heading-h1: 3rem;                /* 48px */
        --heading-h2: 2.25rem;             /* 36px - UPDATED */
        --heading-h3: 1.75rem;             /* 28px - UPDATED */
        --heading-h4: 1.375rem;            /* 22px - UPDATED */
        --heading-h5: 1.125rem;            /* 18px - UPDATED */
        --body-body-lg: 1.125rem;          /* 18px */
        --body-body-md: 1rem;              /* 16px */
        --body-body-sm: 0.875rem;          /* 14px */
    }
}

/* TODO: After setting up Elementor Global Fonts, replace XXXXXXX with the actual typography IDs */
/*
 * SALES CARDIO TYPOGRAPHY SYSTEM
 * Configure these in Elementor > Site Settings > Global Fonts
 * Then inspect elements to get the IDs and replace XXXXXXX below
 */

/* Display XL - For large statistics and counters
 * SPECS: 180px, RBNo2.1a Bold, LH 0.93, Weight 450, Uppercase
 */
.elementor .text-display-xl,
.elementor .text-stat-large {
        font-size: var(--e-global-typography-7a743f2-font-size);
        font-weight: var(--e-global-typography-7a743f2-font-weight);
        text-transform: var(--e-global-typography-7a743f2-text-transform);
        font-style: var(--e-global-typography-7a743f2-font-style);
        line-height: var(--e-global-typography-7a743f2-line-height);
        letter-spacing: var(--e-global-typography-7a743f2-letter-spacing);
}

/* Display / H1 - Hero headlines
 * SPECS: 120px, RBNo2.1a Bold, LH 1.0, Weight 450, Uppercase
 */
.elementor .text-display {
  font-size: var(--e-global-typography-5da24fa-font-size);
    font-weight: var(--e-global-typography-5da24fa-font-weight);
    text-transform: var(--e-global-typography-5da24fa-text-transform);
    line-height: var(--e-global-typography-5da24fa-line-height);
}

/* H1 - Hero headlines (same as Display)
 * SPECS: 120px, RBNo2.1a Bold, LH 1.0, Weight 450, Uppercase
 */
.text-h1,
h1,
.elementor h1.elementor-heading-title,
.elementor .text-h1 {
  	font-size: var(--e-global-typography-5da24fa-font-size);
    font-weight: var(--e-global-typography-5da24fa-font-weight);
    text-transform: var(--e-global-typography-5da24fa-text-transform);
    line-height: var(--e-global-typography-5da24fa-line-height);
}

/* H2 - Major section headlines
 * SPECS: 80px, RBNo2.1a Bold, LH 1.0, Weight 450, Uppercase
 */
.text-h2,
h2,
.elementor h2.elementor-heading-title,
.elementor .text-h2 {
  	font-size: var(--e-global-typography-b1ad48b-font-size);
    font-weight: var(--e-global-typography-b1ad48b-font-weight);
    text-transform: var(--e-global-typography-b1ad48b-text-transform);
    line-height: var(--e-global-typography-b1ad48b-line-height);
}

/* H3 - Card titles, medium headlines
 * SPECS: 48px, Inter Regular, LH 1.1, Weight 400, LS -0.48px
 */
.text-h3,
h3,
.elementor h3.elementor-heading-title,
.elementor .text-h3 {
  	font-family: var(--e-global-typography-8849c55-font-family), Sans-serif;
    font-size: var(--e-global-typography-8849c55-font-size);
    font-weight: var(--e-global-typography-8849c55-font-weight);
    line-height: var(--e-global-typography-8849c55-line-height);
    letter-spacing: var(--e-global-typography-8849c55-letter-spacing);
}

/* H4 - Quotes, subheadings
 * SPECS: 32px, Inter Regular, LH 1.3, Weight 400, LS -0.64px
 */
.text-h4,
h4,
.elementor h4.elementor-heading-title,
.elementor .text-h4 {
        font-size: var(--e-global-typography-77cb9bd-font-size);
        font-weight: var(--e-global-typography-77cb9bd-font-weight);
        line-height: var(--e-global-typography-77cb9bd-line-height);
        letter-spacing: var(--e-global-typography-77cb9bd-letter-spacing);
}

/* H5 - Testimonial quotes, small headers
 * SPECS: 24px, Inter Regular, LH 1.4, Weight 400
 */
.text-h5,
h5,
.elementor h5.elementor-heading-title,
.elementor .text-h5 {
  	font-size: var(--e-global-typography-57c849e-font-size);
    font-weight: var(--e-global-typography-57c849e-font-weight);
    line-height: var(--e-global-typography-57c849e-line-height);
}


/* Body Large - Large body copy, descriptions
 * SPECS: 20px, Inter Regular, LH 1.5, Weight 400, LS -0.2px
 * NOTE: Mapped to H6 for convenience in Elementor
 */
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,
blockquote {
  	font-size: var(--e-global-typography-6bee823-font-size);
    font-weight: var(--e-global-typography-6bee823-font-weight);
    line-height: var(--e-global-typography-6bee823-line-height);
    letter-spacing: var(--e-global-typography-6bee823-letter-spacing);
}

/* Body Medium - Standard body copy
 * SPECS: 16px, Inter Regular, LH 1.5, Weight 400, LS -0.32px
 */
.text-body-medium,
body,
.elementor .text-body-medium,
.elementor .elementor-widget-woocommerce-cart .woocommerce .product-name a {
    font-size: var(--e-global-typography-526c075-font-size);
    font-weight: var(--e-global-typography-526c075-font-weight);
    line-height: var(--e-global-typography-526c075-line-height);
}

/* Body Small - Small text, captions
 * SPECS: 14px, Inter Regular, LH 1.5, Weight 400
 */
.text-body-small,
.elementor .text-body-small,
.elementor-widget-woocommerce-cart .woocommerce table.cart td span {
    font-size: var(--e-global-typography-288e9d6-font-size);
    font-weight: var(--e-global-typography-288e9d6-font-weight);
    line-height: var(--e-global-typography-288e9d6-line-height);
}


/* Button - Button labels (primary CTAs)
 * SPECS: 18px, Inter Regular, LH 1.5, Weight 400, LS -0.36px
 */
.text-button, .elementor-button,
.elementor .text-button,
.elementor [type=submit],
.elementor [type=button]{
    font-size: var(--e-global-typography-6286ecb-font-size);
    font-weight: var(--e-global-typography-6286ecb-font-weight);
    line-height: var(--e-global-typography-6286ecb-line-height);
    letter-spacing: var(--e-global-typography-6286ecb-letter-spacing);
}

/* Caption / Eyebrow / Tag - Section labels, eyebrow text
 * SPECS: 16px, Inconsolata Semi-Bold, LH 1.3, Weight 600, Uppercase
 */
.text-caption,
.elementor .text-caption,
.text-eyebrow,
.elementor .text-eyebrow,
.text-tag,
.elementor .text-tag {
    font-size: var(--e-global-typography-3dd2890-font-size);
    font-weight: var(--e-global-typography-3dd2890-font-weight);
    text-transform: var(--e-global-typography-3dd2890-text-transform);
    line-height: var(--e-global-typography-3dd2890-line-height);
}


/* Color Variables
--------------------------------------------- */
:root {
    --black: #000;
    --white: #fff;
	--text-heading: #fff;
	--text-body: #fff;
	--text: #fff;
	
	/* Brand Colors - Sales Cardio Design System */
	--brand-primary: #3D87CB;     /* TSS Blue */
	--brand-secondary: #4F98DB;   /* TSS Blue Light */
	--brand-accent: #A52420;      /* TSS Red */

	/* Additional Sales Cardio Colors */
	--tss-blue: #3D87CB;
	--tss-blue-light: #4F98DB;
	--tss-red: #A52420;
	--tss-bluegrey: #E3E9EC;
	--tss-med-grey: #1A1A1A;
	--tss-black: #000000;
	--tss-white: #FFFFFF;


	/* Global Fonts - Sales Cardio Brand Fonts */
    --bodyFont: 'Inter', sans-serif;
    --titleFont: 'RBNo2.1a', sans-serif;
}


/* 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: 1536px;
    --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: 0;
    
    /* 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: 50px;
    --button-padding-default: var(--cp-m);
    --button-radius: 4px;
    
    /* 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);
        
        
        /* 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);
    }
}

@media (max-width:900px) {
    :root {
        --section-padding-sides:var(--size-12);
    }
}

/* MOBILE */
@media all and (max-width: 767px) {
    :root {
        /* From mockup - changed values */
        --page-width: 375px;
        
        /* Section Padding - changed values */
        --section-padding-smaller: var(--size-16);
        --section-padding: var(--size-24);
        --section-padding-larger: var(--size-24);
        --section-padding-sides: var(--size-4);
        
        /* 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);
        
        
        /* 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;
}

@media (max-width: 767px){
    

    .section-padding.top-m,
    .section-padding-large.top-m {
        padding-bottom: 0;
    }

    .section-padding.bottom-m,
    .section-padding-large.bottom-m {
        padding-top: 0;
    }

}
/* Drop Shadows
--------------------------------------------- */
.drop-shadow-xs {
    box-shadow: 0px 2px 4px 0px rgba(0, 65, 87, 0.16);
}

.drop-shadow-s {
    box-shadow: 0px 2px 4px 0px rgba(0, 43, 62, 0.04), 0px 16px 32px -4px rgba(0, 43, 62, 0.10);
}

.drop-shadow-m {
    box-shadow: 0px 2px 4px 0px rgba(0, 43, 62, 0.04), 0px 24px 48px -8px rgba(0, 43, 62, 0.12);
}

.drop-shadow-l {
    box-shadow: 0px 2px 4px 0px #002b3e0a, 0px 40px 80px -16px rgba(0, 43, 62, 0.16);
}

.drop-shadow-xl {
    box-shadow: 0px 2px 4px 0px rgba(0, 43, 62, 0.04), 0px 56px 112px -20px rgba(0, 43, 62, 0.18);
}



/* Button Styles
--------------------------------------------- */
/* TODO: Update button styles with your brand colors */
.text-button, .elementor-button,
.elementor .text-button,
.elementor [type=submit],
.elementor [type=button]{
    color: var(--white);
    background: var(--brand-primary);
    border-radius: 4px;
    padding: var(--cp-s) var(--cp-l);
    border: 1px solid var(--brand-primary);
	transition: 0.2s ease;
}
.text-button, .elementor-button:hover,
.elementor .text-button:hover,
.elementor [type=submit]:hover,
.elementor [type=button]:hover {
    background: var(--brand-secondary);
	border-radius: 4px;
	transition: 0.2s ease;
}
.elementor-button-content-wrapper {
    align-items: center;
}


.button-outline .elementor-button {
	background: transparent;
	border: 1px solid var(--brand-primary);
	color: var(--brand-primary);
}
.button-outline .elementor-button:hover {
	background: var(--brand-secondary);
	transition: 0.2s ease;
}
.elementor-swiper-button {
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}
@media all and (min-width:1200px){
	.elementor-swiper-button.swiper-button-disabled {
		opacity: 0 !important;
	}
}



/* Hero Text Image Tiles
--------------------------------------------- */
.hero-tile {
    overflow: hidden;
    position: relative;
    display: inline-flex;
    max-width: 269px;
    max-height: 85px;
    border-radius: 8px;
}
.hero-tile img {
    aspect-ratio: 269/98;
    overflow: hidden;
    object-fit: cover;
    object-position: center center;
}

@media all and (max-width:767px){
	.hero-tile {
		margin: 12px auto 18px;
		display: block;
		max-width: 100%;
	}
}




/* Service Grid Cards Element
--------------------------------------------- */
.services-list {
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.services-list .service-card {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                flex-basis 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.services-list .service-card--closed {
    flex-basis: 289px;
    flex-grow: 0;
}

.services-list .service-card--open {
    flex-basis: 853px;
    flex-grow: 1;
}

.services-list .service-card__bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.services-list .service-card--open .service-card__bg-image {
    opacity: 1;
}

.services-list .service-card__gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
        rgba(61, 135, 203, 0) 31.25%, 
        rgba(61, 135, 203, 0.8) 67.057%, 
        #3D87CB 100%);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.services-list .service-card--open .service-card__gradient {
    opacity: 1;
}

.services-list .service-card__content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.services-list .service-card--closed .service-card__content {
    justify-content: space-between;
}

.services-list .service-card--open .service-card__content {
    padding: 20px 20px 32px 32px;
    justify-content: space-between;
}

.services-list .service-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.services-list .service-card__close,
.services-list .service-card__expand {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    align-self: flex-end;
    display: none;
    transition: transform 0.2s;
}

.services-list .service-card__close:hover,
.services-list .service-card__expand:hover {
    transform: scale(1.1);
}

.services-list .service-card__close svg,
.services-list .service-card__expand svg {
    width: 100%;
    height: 100%;
    display: block;
}

.services-list .service-card--open .service-card__close {
    display: block;
    position: absolute;
    top: var(--cp-m);
    right: var(--cp-m);
    background: white;
	border-radius: 100px;
}

.services-list .service-card--closed .service-card__expand {
    display: block;
    position: absolute;
    top: var(--cp-m);
    right: var(--cp-m);
    background: white;
	border-radius: 100px;
}

.services-list .service-card__close svg path, .services-list .service-card__expand svg path {
    stroke: var(--tss-blue);
}

.services-list .service-card__thumbnail {
    width: 174px;
    height: 174px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.services-list .service-card--open .service-card__thumbnail {
    opacity: 0;
    pointer-events: none;
}
.services-list .service-card__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.services-list .service-card__title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.48px;
    margin: 0;
    max-width: 310px;
}
.services-list .service-card__caption {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 400;
}
.services-list .service-card__description {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.2px;
    margin: 0;
    max-width: 452px;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 40px 0 0;
}

.services-list .service-card--open .service-card__description {
    opacity: 1;
	min-width: 450px;
}
.services-list .service-card--closed .service-card__description {
    display: none;
}
/* Layout 2 */
.services-list.layout-2  .service-card__title {
    font-family: 'Inter', sans-serif!important;
    text-transform: none;
}
.services-list.layout-2 .service-card.service-card--open .service-card__title, 
.services-list.layout-2 .service-card.service-card--open .service-card__caption {
    width: 33%;
    display: inline-block;
}

.services-list.layout-2 .service-card.service-card--open .service-card__description {
    position: absolute;
    right: 20px;
    bottom: 30px;
    width: 55%;
    margin-left: auto;
    display: inline-block;
}

@media (max-width: 1024px) {
    .services-list {
        flex-direction: column;
        gap: 16px;
    }
    
    .services-list .service-card--closed {
        flex-basis: 120px;
        width: 100%;
    }
    
    .services-list .service-card--open {
        flex-basis: 500px;
        width: 100%;
    }
    
    .services-list .service-card--closed .service-card__content {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
    
    .services-list .service-card--closed .service-card__top {
        flex-shrink: 0;
        width: auto;
    }
    
    .services-list .service-card--closed .service-card__text {
        flex: 1;
        min-width: 0;
    }
    
    .services-list .service-card--open .service-card__content {
        padding: 24px;
    }
    
    .services-list .service-card__thumbnail {
        width: 80px;
        height: 80px;
    }
    
    .services-list .service-card__text {
        gap: 24px;
    }
    
    .services-list .service-card__title {
        max-width: none;
    }
    
    .services-list .service-card__description {
        max-width: none;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .services-list .service-card--closed {
        flex-basis: 100px;
    }
    
    .services-list .service-card--open {
        flex-basis: 450px;
    }
    
    .services-list .service-card--open .service-card__content {
        padding: 20px;
        flex-direction: column;
        justify-content: flex-end;
    }
    
    .services-list .service-card__thumbnail {
        width: 60px;
        height: 60px;
    }
    
    .services-list .service-card__text {
        gap: 0px;
    }
	.services-list .service-card--open .service-card__description {
		min-width: 100%;
	}
    .services-list .service-card__description {
        margin: 20px 0 0;
    }
    .services-list.layout-2 .service-card.service-card--open .service-card__title, 
    .services-list.layout-2 .service-card.service-card--open .service-card__caption,
    .services-list.layout-2 .service-card.service-card--open .service-card__description {
        width: 100%;
    }
    .services-list.layout-2 .service-card.service-card--open .service-card__description {
        position: static;
    }
    .services-list.layout-2 .service-card__title {
        font-size: 26px!important;
    }
    .services-list .service-card__caption {
        font-size: 18px;
    }
}







/* Testimonial Carousel
--------------------------------------------- */
.testimonial-carousel-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.testimonial-carousel {
    width: 100%;
}

.testimonial-carousel .swiper-wrapper {
    display: flex;
    align-items: flex-start;
}

.testimonial-card {
    background-color: #E3E9EC;
    border-radius: 16px;
    padding: 64px 96px 64px 64px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
	gap: 20px;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 32px;
}

.testimonial-photo {
    width: 120px;
    height: 120px;
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0;
}

.testimonial-photo img {
    width: 100%;
    height: 150%;
    object-fit: cover;
    object-position: center top;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    flex-shrink: 0;
}

.testimonial-author .author-name {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.21;
    color: #000000;
    margin: 0;
}

.testimonial-author .author-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.21;
    color: #000000;
    opacity: 0.6;
    margin: 0;
    text-transform: uppercase;
}

.testimonial-text {
    width: 100%;
}

.testimonial-text p {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
    margin: 0;
}

.testimonial-nav-arrows,
.session-nav-arrows {
    display: flex;
    gap: 16px;
    align-items: center;
}

.testimonial-nav-arrows button,
.session-nav-arrows button {
    width: 48px;
    height: 48px;
    border-radius: 999px !important;
    background-color: #E3E9EC;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
	aspect-ratio: 1;
    padding: 0;
}

.testimonial-nav-arrows button:hover,
.session-nav-arrows button:hover {
    background-color: #d0d9dd;
}

.testimonial-nav-arrows button:disabled,
.session-nav-arrows button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.testimonial-nav-arrows button i,
.session-nav-arrows button i {
    font-size: 20px;
    color: #000000;
}

@media (max-width: 1024px) {
    .testimonial-card {
        padding: 48px 64px 48px 48px;
        height: auto;
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .testimonial-card {
        padding: 32px;
        height: auto;
        min-height: 350px;
    }

    .testimonial-header {
        gap: 24px;
    }

    .testimonial-photo {
        width: 80px;
        height: 80px;
    }

    .testimonial-author {
        width: auto;
        flex: 1;
    }

    .testimonial-author .author-name {
        font-size: 22px;
    }

    .testimonial-author .author-title {
        font-size: 14px;
    }

    .testimonial-text p {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .testimonial-card {
        padding: 24px;
        min-height: 300px;
    }

    .testimonial-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .testimonial-photo {
        width: 60px;
        height: 60px;
    }

    .testimonial-author .author-name {
        font-size: 20px;
    }

    .testimonial-text p {
        font-size: 16px;
    }
}




/* Session Carousel
--------------------------------------------- */
.session-card {
    background: var(--tss-blue);
    padding: 1rem 1rem var(--cp-l);
    border-radius: 1rem;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.session-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.session-photo {
    display: flex;
}
.session-photo img {
	aspect-ratio: 1;
	object-fit: cover;
}
.session-title {
	margin: 0;
}
.session-card .elementor-button:hover {
	background: #000;
}


/* Accordion Cards Widget
--------------------------------------------- */
.accordion-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.accordion-card {
    border-radius: 16px;
    box-shadow: 0px 16px 32px -4px rgba(0,43,62,0.1), 0px 2px 4px 0px rgba(0,43,62,0.04);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    /* Only transition background-color; height uses keyframe animations */
    transition: background-color 0.3s ease;
}

/* Keyframe animations for synchronized height transitions */
@keyframes collapseCard {
    0% {
        height: var(--accordion-expanded-height);
        padding: 16px;
        background: #fff;
    }
    100% {
        height: var(--accordion-collapsed-height);
        padding: 32px;
        background: #4f98db;
    }
}

@keyframes expandCard {
    0% {
        height: var(--accordion-collapsed-height);
        padding: 32px;
        background: #4f98db;
    }
    100% {
        height: var(--accordion-expanded-height);
        padding: 16px;
        background: #fff;
    }
}

/* Transition state classes */
.accordion-card--collapsing {
    animation: collapseCard var(--accordion-transition-duration) ease-in-out forwards;
}

.accordion-card--expanding {
    animation: expandCard var(--accordion-transition-duration) ease-in-out forwards;
}

/* Expanding card needs expanded inner layout immediately */
.accordion-card--expanding .accordion-card__inner {
    display: flex;
    justify-content: space-between;
    height: 100%;
    gap: 0;
}

.accordion-card--expanding .accordion-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    width: 40%;
    min-width: 360px;
    opacity: 1;
    visibility: visible;
    position: relative;
}

.accordion-card--expanding .accordion-card__content-top {
    display: block;
}

.accordion-card--expanding .accordion-card__content-bottom {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.accordion-card--expanding .accordion-card__text-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.accordion-card--expanding .accordion-card__image {
    position: relative;
    width: 60%;
    max-width: 711px;
    height: 100%;
    opacity: 1;
    visibility: visible;
}

.accordion-card--expanding .accordion-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.accordion-card--expanding .accordion-card__title--collapsed,
.accordion-card--expanding .accordion-card__icon {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
    /* Fade out synced with card expansion */
    transition: opacity var(--accordion-transition-duration) ease-in-out 0ms,
                visibility 0ms linear var(--accordion-transition-duration);
}

/* Collapsing card keeps expanded row layout while content fades */
.accordion-card--collapsing .accordion-card__inner {
    display: flex;
    justify-content: space-between;
    height: 100%;
    gap: 0;
    position: relative;
}

.accordion-card--collapsing .accordion-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    width: 40%;
    min-width: 360px;
    opacity: 0;
    visibility: hidden;
    position: relative;
    /* Fade out synced with card collapse */
    transition: opacity var(--accordion-transition-duration) ease-in-out 0ms,
                visibility 0ms linear var(--accordion-transition-duration);
}

.accordion-card--collapsing .accordion-card__image {
    position: relative;
    width: 60%;
    max-width: 711px;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    /* Fade out synced with card collapse */
    transition: opacity var(--accordion-transition-duration) ease-in-out 0ms,
                visibility 0ms linear var(--accordion-transition-duration);
}

/* Collapsed title/icon overlay - fade in on top */
.accordion-card--collapsing .accordion-card__title--collapsed {
    color: #fff;
    margin: 0;
    opacity: 1;
    visibility: visible;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Fade in synced with card collapse */
    transition: opacity var(--accordion-transition-duration) ease-in-out 0ms,
                visibility 0ms linear 0ms;
}

.accordion-card--collapsing .accordion-card__icon {
    opacity: 1;
    visibility: visible;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Fade in synced with card collapse */
    transition: opacity var(--accordion-transition-duration) ease-in-out 0ms,
                visibility 0ms linear 0ms;
}

/* Expanded state */
.accordion-card--expanded {
    background: #fff;
    padding: 16px;
    height: var(--accordion-expanded-height);
    min-height: var(--accordion-expanded-height);
    max-height: var(--accordion-expanded-height);
}

.accordion-card--expanded .accordion-card__inner {
    display: flex;
    justify-content: space-between;
    height: 100%;
    gap: 0;
}

.accordion-card--expanded .accordion-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    width: 40%;
    min-width: 360px;
    opacity: 1;
    visibility: visible;
    position: relative;
    /* Fade in with delay - content appears after card starts expanding */
    transition: opacity var(--accordion-content-fade-duration) ease-out 100ms,
                visibility 0ms linear 0ms;
}

.accordion-card--expanded .accordion-card__content-top {
    display: block;
}

.accordion-card--expanded .accordion-card__content-bottom {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.accordion-card--expanded .accordion-card__text-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.accordion-card--expanded .accordion-card__image {
    position: relative;
    width: 60%;
    max-width: 711px;
    height: 100%;
    opacity: 1;
    visibility: visible;
    /* Fade in with delay - image appears after card starts expanding */
    transition: opacity var(--accordion-content-fade-duration) ease-out 100ms,
                visibility 0ms linear 0ms;
}

.accordion-card--expanded .accordion-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.accordion-card--expanded .accordion-card__title--collapsed,
.accordion-card--expanded .accordion-card__icon {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
    /* Fade out over full card transition for seamless sync */
    transition: opacity var(--accordion-transition-duration) ease-in-out 0ms,
                visibility 0ms linear var(--accordion-transition-duration);
}

/* Collapsed state */
.accordion-card--collapsed {
    background: #4f98db;
    padding: 32px;
    height: var(--accordion-collapsed-height);
    min-height: var(--accordion-collapsed-height);
    max-height: var(--accordion-collapsed-height);
}

.accordion-card--collapsed .accordion-card__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-card--collapsed .accordion-card__title--collapsed {
    color: #fff;
    margin: 0;
    opacity: 1;
    visibility: visible;
    position: relative;
    /* Fade in synced with card transition */
    transition: opacity var(--accordion-transition-duration) ease-in-out 0ms,
                visibility 0ms linear 0ms;
}

.accordion-card--collapsed .accordion-card__content,
.accordion-card--collapsed .accordion-card__image,
.accordion-card--collapsed .accordion-card__title--expanded {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden;
    /* Fade out immediately when collapsing */
    transition: opacity var(--accordion-content-fade-duration) ease-in 0ms,
                visibility 0ms linear var(--accordion-content-fade-duration);
}

.accordion-card--collapsed .accordion-card__icon {
    opacity: 1;
    visibility: visible;
    position: relative;
    /* Fade in synced with card transition */
    transition: opacity var(--accordion-transition-duration) ease-in-out 0ms,
                visibility 0ms linear 0ms;
}

/* Typography overrides */
.accordion-card__label {
    display: block;
    margin-bottom: 0;
}

.accordion-card__title {
    margin: 0;
}

.accordion-card__description {
    margin: 0;
    max-width: 360px;
}

/* Button styling */
.accordion-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border: 1px solid #000;
    border-radius: 8px;
    background: transparent;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    text-transform: capitalize;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    width: fit-content;
}

.accordion-card__button:hover {
    background: #000;
    color: #fff;
}

/* Icon styling */
.accordion-card__icon {
    width: 48px;
    height: 48px;
    background: #464749;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    flex-shrink: 0;
}

.accordion-card__icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.accordion-card__image-icon {
    position: absolute;
    top: 21px;
    right: 23px;
    width: 48px;
    height: 48px;
    background: #464749;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.accordion-card__image-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}
/* layout 2 */
.accordion-cards.layout-2 .accordion-card--expanded .accordion-card__content {
    padding: 32px;
    padding-left: 22%;
    position: relative;
}

.accordion-cards.layout-2 .accordion-card--expanded .accordion-card__content {
    width: 62%;
}

.accordion-cards.layout-2 .accordion-card--expanded .accordion-card__image {
    width: 38%;
}

.accordion-cards.layout-2  .accordion-card__title--expanded,
.accordion-cards.layout-2 .accordion-card__content-top{
    position: absolute;
    left: 32px;
    top: 32px;
    width: 24%;
}
.accordion-cards.layout-2 .accordion-card__content-top + .accordion-card__content-bottom .accordion-card__title--expanded{
    margin-top: 40px;
}
.accordion-cards.layout-2 .accordion-card--expanded .accordion-card__content-bottom {
    border-left: 1px solid #000000;
    padding-left: 32px;
}
.accordion-cards.layout-2 .accordion-card__description {
    max-width: 95%;
}
.accordion-cards.layout-2 .accordion-card__title {
    font-size: 32px;
}

.accordion-cards.layout-2 .accordion-card--collapsed {
    padding: 48px;
    height: 144px;
    min-height: 144px;
}
.accordion-card__description ul{
    padding-left: 1.3em;
}
.accordion-card__description p:not(:last-child),
.accordion-card__description ul>li {
    margin-bottom: 0.3em;
}
/* Responsive - Tablet */
@media (max-width: 1024px) {
    :root {
        --accordion-expanded-height: 700px;
        --accordion-collapsed-height: 120px;
    }

    /* Tablet-specific keyframes */
    @keyframes collapseCard {
        0% {
            height: 700px;
            padding: 16px;
            background: #fff;
        }
        100% {
            height: 120px;
            padding: 32px;
            background: #4f98db;
        }
    }

    @keyframes expandCard {
        0% {
            height: 120px;
            padding: 32px;
            background: #4f98db;
        }
        100% {
            height: 700px;
            padding: 16px;
            background: #fff;
        }
    }

    .accordion-card--expanded .accordion-card__inner,
    .accordion-card--expanding .accordion-card__inner,
    .accordion-card--collapsing .accordion-card__inner {
        flex-direction: column-reverse;
        gap: 24px;
    }

    .accordion-card--expanded .accordion-card__content,
    .accordion-card--expanding .accordion-card__content,
    .accordion-card--collapsing .accordion-card__content {
        width: 100%;
        min-width: unset;
        gap: 24px;
    }

    .accordion-card--expanded .accordion-card__content-bottom,
    .accordion-card--expanding .accordion-card__content-bottom {
        gap: 32px;
    }

    .accordion-card--expanded .accordion-card__image,
    .accordion-card--expanding .accordion-card__image,
    .accordion-card--collapsing .accordion-card__image {
        width: 100%;
        max-width: none;
        height: 300px;
    }
    /* layout 2 */
    .accordion-cards.layout-2 .accordion-card--expanded .accordion-card__image {
        width: 100%;
    }

    .accordion-cards.layout-2 .accordion-card--expanded .accordion-card__content {
        width: 100%;
        padding: 16px;
        padding-left: 38%;
    }
    .accordion-cards.layout-2 .accordion-card__title--expanded, .accordion-cards.layout-2 .accordion-card__content-top {
        left: 16px;
        top: 16px;
    }
    .accordion-cards.layout-2 .accordion-card__title--expanded, .accordion-cards.layout-2 .accordion-card__content-top {
        width: 32%;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    :root {
        --accordion-expanded-height: 635px;
        --accordion-collapsed-height: 112px;
    }

    /* Mobile-specific keyframes */
    @keyframes collapseCard {
        0% {
            height: 635px;
            padding: 12px;
            background: #fff;
        }
        100% {
            height: 112px;
            padding: 24px;
            background: #4f98db;
        }
    }

    @keyframes expandCard {
        0% {
            height: 112px;
            padding: 24px;
            background: #4f98db;
        }
        100% {
            height: 635px;
            padding: 12px;
            background: #fff;
        }
    }

    .accordion-card--expanded .accordion-card__inner,
    .accordion-card--expanding .accordion-card__inner,
    .accordion-card--collapsing .accordion-card__inner {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .accordion-card--expanded .accordion-card__content,
    .accordion-card--expanding .accordion-card__content,
    .accordion-card--collapsing .accordion-card__content {
        padding: 12px;
        width: 100%;
        min-width: unset;
    }

    .accordion-card--expanded .accordion-card__image,
    .accordion-card--expanding .accordion-card__image,
    .accordion-card--collapsing .accordion-card__image {
        width: 100%;
        max-width: none;
        height: 200px;
        flex-shrink: 0;
    }

    .accordion-card--expanded .accordion-card__image img,
    .accordion-card--expanding .accordion-card__image img,
    .accordion-card--collapsing .accordion-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .accordion-card--collapsed .accordion-card__title--collapsed,
    .accordion-card--collapsing .accordion-card__title--collapsed {
        font-size: 32px;
    }

    .accordion-card__button {
        width: 100%;
    }
    .accordion-cards.layout-2 .accordion-card--collapsed {
        padding: 32px;
    }
    .accordion-cards.layout-2 .accordion-card--collapsed,
    .accordion-cards.layout-2 .accordion-card--expanded {
        height: auto;
        min-height: 1px;
        max-height: inherit;
    }
    .accordion-cards.layout-2 .accordion-card--expanded .accordion-card__content {
        padding: 12px;
    }

    .accordion-cards.layout-2 .accordion-card__title--expanded, 
    .accordion-cards.layout-2 .accordion-card__content-top {
        position: static;
        width: 100%;
    }

    .accordion-cards.layout-2 .accordion-card--expanded .accordion-card__content-bottom {
        border: none;
        padding: 0;
    }

    .accordion-cards.layout-2 .accordion-card__content-top + .accordion-card__content-bottom .accordion-card__title--expanded {
        margin: 0;
    }
}




/* Post Meta Shortcode
--------------------------------------------- */
.post-meta-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.post-meta-tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-meta-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 10px 20px;
    background-color: #bccdd6;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
}

.post-meta-tag:hover {
    background-color: #a8bcc6;
}

.post-meta-read-time {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    text-align: center;
}





body .post-feed-wrapper {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

body .post-feed-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

body .post-feed-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background-color: #bccdd6;
	border: 1px solid #bccdd6;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #000;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body .post-feed-filter:hover {
    background-color: #a8bcc6;
	border-color: #a8bcc6;
}

body .post-feed-filter.active {
    background-color: #4f98db;
    color: #fff;
}

body .post-feed-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

body .post-feed-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #3d87cb;
    border-radius: 16px;
    padding: 16px 16px 32px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body .post-feed-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body .post-feed-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 16px;
    overflow: hidden;
}

body .post-feed-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body .post-feed-card-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 16px;
}

body .post-feed-card-title {
    color: #fff;
    margin: 0;
}

body .post-feed-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

body .post-feed-card-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 10px 20px;
    background-color: #bccdd6;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #000;
    white-space: nowrap;
}

body .post-feed-no-posts {
    grid-column: 1 / -1;
    text-align: center;
    color: #666;
}

@media (max-width: 1024px) {    
    body .post-feed-card-content {
        gap: 24px;
    }
}

@media (max-width: 768px) {
    body .post-feed-grid {
        grid-template-columns: 1fr;
    }
    
}


/* Sessions Layout
--------------------------------------------- */
.sessions-layout {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 30px;
    align-items: start;
}

/* Player Column
--------------------------------------------- */
.sessions-player {
    position: sticky;
    top: 30px;
    background: #4F98DB;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sessions-player__badge {
    display: inline-block;
    width: fit-content;
    background: #fff;
    color: #4F98DB;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 20px;
}

.sessions-player__video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.sessions-player__video[data-portrait="1"] {
    padding-top: 0;
    aspect-ratio: 9/16;
    max-height: calc(100vh - 180px);
}

.sessions-player__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sessions-player__title {
    margin: 0;
    color: #fff;
}

/* Cards Column
--------------------------------------------- */
.sessions-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.session-card {
    background: #4F98DB;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.session-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.session-card--active {
    outline: 3px solid var(--white);
    outline-offset: -3px;
}

.session-card__thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: #000;
}

.session-card__thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.session-card__format {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
}

.session-card__content {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.session-card .elementor-button {
    background: transparent;
    border: 1px solid var(--white);
}

.session-card__title {
    margin: 0;
    color: var(--white);
}
.player-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.player-header h2#sessions-title {
    position: relative;
    top: 4px;
}
/* Home updated slider
============================================ */
.home_updated_slider .elementor-slides-wrapper {
    overflow: visible;
    margin: 0 -16px;
}
.home_updated_slider .elementor-slides-wrapper .swiper-slide {
    padding: 0 16px;
}
.home_updated_slider .elementor-slides-wrapper .elementor-swiper-button {
    top: auto;
    bottom: -70px;
    left: calc(50% - 25px);
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border: 1px solid var(--white);
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s ease-in-out;
}
.home_updated_slider .elementor-slides-wrapper .elementor-swiper-button:hover {
    background-color:var(--white);
}
.home_updated_slider .elementor-slides-wrapper .elementor-swiper-button:hover::before {
    color: #3D87CB;
}
.home_updated_slider .elementor-slides-wrapper .elementor-swiper-button svg {
    display: none;
}
.home_updated_slider .elementor-slides-wrapper .elementor-swiper-button::before {
    content: "\f060";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--white);
    font-size: 12px;
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.4s ease-in-out;
}
.home_updated_slider .elementor-slides-wrapper .elementor-swiper-button.elementor-swiper-button-next::before {
    content: "\f061";
}
.home_updated_slider .elementor-slides-wrapper .elementor-swiper-button.elementor-swiper-button-next {
    left: calc(50% + 25px);
}
.home_updated_slider .elementor-slides-wrapper .swiper-slide-inner {
    overflow: hidden;
}
.elementor .elementor-element.home_updated_slider .swiper-slide-inner .elementor-slide-heading:not(:last-child) {
    display: flex;
    align-items: center;
    gap: 32px;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.home_updated_slider .elementor-slide-heading span {
    background-color: #E3E9EC;
    backdrop-filter: blur(40px);
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    font-size: 48px;
}
.elementor .elementor-element.home_updated_slider .swiper-slide {
    min-height: 392px;
    height: auto;
}
/* Get Access pop up form
============================================= */
.session_main_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease-in-out;
    background-color: rgba(0,0,0,0.5);
    z-index: 99999;
}
.session_main_wrapper.active {
    opacity: 1;
    visibility: visible;
}
.session_close_btn {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 555;
}
.session_close_btn svg {
    width: 20px;
    height: 20px;
    fill: var(--tss-blue);
}
.session_iframe_wrappper {
    width: 100%;
    max-width: 1200px;
    position: relative;
}
.session_iframe_wrappper iframe {
    height: 90vh;
    background-color: var(--white);
    border-radius: 12px;
    overflow: hidden;
}
body.session_overlay {
    overflow: hidden;
}
div.form_iframe_wrapper iframe {
    height: 1220px;
}
/* Counter 
============================================== */
.sales-counter .elementor-countdown-item .elementor-countdown-digits {
    font-family: var(--titleFont);
}
/* Responsive
--------------------------------------------- */
@media (max-width: 1024px) {
    div.form_iframe_wrapper iframe {
        height: 815px;
    }
    .session_iframe_wrappper iframe {
        height: 85vh;
    }
    .session_iframe_wrappper iframe img {
        object-position: right;
    }
    .session_close_btn svg {
        width: 14px;
        height: 15px;
    }
    .home_updated_slider .elementor-slides-wrapper .elementor-swiper-button {
        bottom: -60px;
    }
    .home_updated_slider .elementor-slide-heading span {
        width: 64px;
        height: 64px;
        font-size: 32px;
    }
    .elementor .elementor-element.home_updated_slider .swiper-slide-inner .elementor-slide-heading:not(:last-child) {
        margin-bottom: 32px;
    }
    .elementor .elementor-element.home_updated_slider .swiper-slide {
        min-height: 340px;
    }
    .elementor .elementor-element.home_updated_slider .swiper-slide-inner .elementor-slide-heading:not(:last-child) {
        gap: 24px;
    }
    .session_close_btn {
        right: auto;
        left: 20px;
    }
}
@media (max-width: 991px) {
    .home_updated_slider .elementor-slides-wrapper .elementor-swiper-button {
        bottom: -60px;
    }
    .sessions-layout {
        grid-template-columns: 1fr;
    }

    .sessions-player {
        position: relative;
        top: 0;
    }

    .sessions-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .home_updated_slider .elementor-slide-heading span {
        width: 52px;
        height: 52px;
        border-radius: 8px;
        font-size: 26px;
    }
    .elementor .elementor-element.home_updated_slider .swiper-slide-inner .elementor-slide-heading:not(:last-child) {
        gap: 10px;
        flex-direction: column;
    }
    .elementor .elementor-element.home_updated_slider .swiper-slide-inner .elementor-slide-heading:not(:last-child) {
        margin-bottom: 13px;
    }
    .sessions-cards {
        grid-template-columns: 1fr;
    }

    .session-card__content {
        flex-direction: column;
        align-items: flex-start;
    }

    .session-card__content .elementor-button {
        width: 100%;
        text-align: center;
    }
}

/* gallery SCA*/


.sca-image-gallery .swiper {
    overflow: visible;
    margin: 0 -80px;
}

.sca-image-gallery .swiper .swiper-slide {
    padding: 0 80px;
    transition: all 0.3s;
}

.sca-image-gallery .swiper .swiper-slide:not(.swiper-slide-active) {
    filter: blur(33px);
}

.sca-image-gallery .swiper .elementor-swiper-button {
    width: auto;
    height: auto;
    position: absolute;
    top: inherit;
    left: 50%;
    right: inherit;
    bottom: 0;
    transform: translate(-50%, 0);
}


.sca-image-gallery .swiper .elementor-swiper-button svg{
    padding: 25%;
    border: 1px solid currentColor;
    border-radius: 50%;
}
.sca-image-gallery .swiper .elementor-swiper-button.elementor-swiper-button-prev{
    margin-left: -24px;
}
.sca-image-gallery .swiper .elementor-swiper-button.elementor-swiper-button-next{
    margin-left: 24px;
}
@media (min-width: 1601px){
	.sticky-card-wrap .card {
		--row-gap: var(--cp-xl)!important;
		--column-gap: var(--cp-xl)!important;
	}
}
@media (max-width: 1600px) and (min-width: 1440px){
	.sticky-card-wrap .card {
		justify-content: flex-start!important;
		padding-top: 0!important;
	}
}