/* ===========================
   GOBAL CSS VARIABLES
=========================== */
:root {
    /* Gradients */
    --faq-grad-bg: linear-gradient(
        135deg,
        rgba(255, 216, 247, 1) 0%,
        rgba(255, 255, 255, 1) 19%,
        rgba(255, 255, 255, 1) 58%,
        rgba(214, 231, 255, 1) 100%
    );

    --brand-linear-bg: linear-gradient(
        90deg,
        rgba(136, 0, 255, 0.23) 0%,
        rgba(68, 210, 255, 0.19) 50%,
        rgba(101, 75, 255, 0.3) 100%
    );

    --grad-grey-bg: linear-gradient(
        90deg,
        rgba(51, 51, 51, 0.23) 0%,
        rgba(170, 170, 170, 0.19) 50%,
        rgba(102, 102, 102, 0.3) 100%
    );

    --primary-secondary-bg: linear-gradient(
        90deg,
        var(--color-primary-500) 0%,
        var(--color-secondary-500) 100%
    );

    --secondary-primary-bg: linear-gradient(
        90deg,
        var(--color-secondary-500) 0%,
        var(--color-primary-500) 100%
    );

    /* Colors */
    --color-black: rgba(0, 0, 0, 1);
    --color-white: rgba(255, 255, 255, 1);

    --color-primary-50: rgba(244, 247, 253, 1);
    --color-primary-50: rgba(232, 238, 250, 1);
    --color-primary-200: rgba(199, 212, 242, 1);
    --color-primary-300: rgba(164, 186, 234, 1);
    --color-primary-400: rgba(127, 161, 226, 1);
    --color-primary-500: rgba(32, 73, 162, 1);
    --color-primary-600: rgba(27, 58, 135, 1);
    --color-primary-700: rgba(21, 48, 110, 1);
    --color-primary-800: rgba(16, 37, 85, 1);
    --color-primary-900: rgba(10, 23, 54, 1);
    --color-primary-muted: rgba(26, 30, 42, 1);
    --color-primary-muted-1000: rgba(20, 23, 33, 1);

    --color-gray-50: rgba(249, 250, 251, 1);
    --color-gray-100: rgba(243, 244, 246, 1);
    --color-gray-200: rgba(229, 231, 235, 1);
    --color-gray-300: rgba(209, 213, 219, 1);
    --color-gray-400: rgba(156, 163, 175, 1);
    --color-gray-500: rgba(107, 114, 128, 1);
    --color-gray-600: rgba(75, 85, 99, 1);
    --color-gray-700: rgba(55, 65, 81, 1);
    --color-gray-800: rgba(31, 41, 55, 1);
    --color-gray-900: rgba(17, 24, 39, 1);

    --color-accent-50: rgba(230, 247, 253, 1);
    --color-accent-100: rgba(179, 230, 249, 1);
    --color-accent-200: rgba(128, 213, 245, 1);
    --color-accent-300: rgba(77, 196, 240, 1);
    --color-accent-400: rgba(38, 180, 235, 1);
    --color-accent-500: rgba(0, 138, 211, 1);
    --color-accent-600: rgba(0, 114, 172, 1);
    --color-accent-700: rgba(0, 91, 134, 1);
    --color-accent-800: rgba(0, 91, 134, 1);
    --color-accent-900: rgba(0, 46, 59, 1);

    --color-secondary-50: rgba(253, 246, 246, 1);
    --color-secondary-100: rgba(247, 233, 234, 1);
    --color-secondary-200: rgba(234, 191, 194, 1);
    --color-secondary-300: rgba(221, 149, 154, 1);
    --color-secondary-400: rgba(208, 107, 114, 1);
    --color-secondary-500: rgba(143, 43, 48, 1);
    --color-secondary-600: rgba(120, 36, 40, 1);
    --color-secondary-700: rgba(97, 28, 33, 1);
    --color-secondary-800: rgba(71, 21, 23, 1);
    --color-secondary-900: rgba(45, 12, 13, 1);

    --color-neutral-50: rgba(245, 245, 245, 1);
    --color-neutral-100: rgba(238, 238, 238, 1);
    --color-neutral-200: rgba(221, 221, 221, 1);
    --color-neutral-300: rgba(196, 196, 196, 1);
    --color-neutral-400: rgba(143, 143, 143, 1);
    --color-neutral-500: rgba(94, 94, 94, 1);
    --color-neutral-600: rgba(68, 68, 68, 1);
    --color-neutral-700: rgba(51, 51, 51, 1);
    --color-neutral-800: rgba(31, 31, 31, 1);
    --color-neutral-900: rgba(26, 26, 26, 1);

    --color-success-100: rgba(209, 250, 229, 1);
    --color-success-500: rgba(16, 185, 129, 1);
    --color-success-700: rgba(4, 120, 87, 1);

    --color-warning-100: rgba(254, 243, 199, 1);
    --color-warning-500: rgba(245, 158, 11, 1);
    --color-warning-700: rgba(180, 83, 9, 1);
    
    --color-error-100: rgba(254, 226, 226, 1);
    --color-error-500: rgba(239, 68, 68, 1);
    --color-error-700: rgba(185, 28, 28, 1);
    
    --color-info-100: rgba(219, 234, 254, 1);
    --color-info-500: rgba(59, 130, 246, 1);
    --color-info-700: rgba(29, 78, 216, 1);


    /* Font Family */
    --font-body: 'Poppins', sans-serif;
    --font-heading: 'Raleway', sans-serif;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Body Font Sizes + Line Heights */
    --font-body-xs: 0.75rem;
    --line-body-xs: 130%;

    --font-body-xs-plus: 0.8125rem;
    --line-body-xs-plus: 140%;

    --font-body-sm: 0.875rem;
    --line-body-sm: 150%;

    --font-body-base: 0.9375rem;
    --line-body-base: 150%;

    --font-body-base-plus: 1rem;
    --line-body-base-plus: 150%;

    --font-body-lg: 1.125rem;
    --line-body-lg: 160%;

    /* Heading Font Sizes + Line Heights */
    --font-h1: 3.75rem;
    --line-h1: 120%;

    --font-h2: 3rem;
    --line-h2: 120%;

    --font-h3: 2.25rem;
    --line-h3: 120%;

    --font-h4: 1.875rem;
    --line-h4: 120%;

    --font-h5: 1.5rem;
    --line-h5: 130%;

    --font-h6: 1.25rem;
    --line-h6: 140%;
}

/* ============================
   Global Base Styles
============================ */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-white);
    color: var(--color-gray-800);
    font-family: var(--font-body);
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-gray-900);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary-500);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-gray-900);
    line-height: 1.2;
    margin-top: 0;
}

p {
    margin-bottom: 1rem;
}

.rotate-35 {
    transform: rotate(-35deg);
}

/* ===========================
   BUTTON COMPONENT
=========================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

/* ===== Button Sizes ===== */
.btn-sm { 
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
}

.btn-md { 
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
}

.btn-lg { 
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
}

.btn-xl { 
    font-size: var(--font-body-lg);
    line-height: var(--line-body-lg);
    border-radius: 0.5rem;
    padding: 1rem 2rem;
}

/* ===== Button Type Filled ===== */
.btn-filled-cta {
    background: var(--primary-secondary-bg);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

.btn-filled-cta::after {
    content: "";
    background: var(--secondary-primary-bg);
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
}

.btn-filled-cta:hover::after {
    opacity: 1;
}

.btn-filled-cta span,
.btn-filled-cta svg,
.btn-filled-cta img {
    color: var(--color-white);
    position: relative;
    z-index: 1;
}

.btn-filled-primary {
    background-color: var(--color-primary-500);
    color: var(--color-white);
}

.btn-filled-primary:hover {
    background-color: var(--color-primary-600);
    color: var(--color-white);
}

.btn-filled-gray {
    background-color: var(--color-gray-800);
    color: var(--color-white);
}

.btn-filled-gray:hover {
    background-color: var(--color-gray-900);
    color: var(--color-white);
}

/* ===== Button Type Outline ===== */
.btn-outline-cta {
    --border-width: 1px;
    padding: var(--border-width);
    background: var(--primary-secondary-bg);
}

.btn-outline-cta .content {
    background: var(--color-white);
}

.btn-outline-cta .text {
    background-color: transparent;
    background: var(--primary-secondary-bg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.btn-outline-cta:hover {
    background: var(--secondary-primary-bg);
}

.btn-outline-cta:hover .text {
    background: var(--secondary-primary-bg);
    background-clip: text;
}

.btn-outline-cta.btn-sm .content {
    border-radius: calc(0.375rem - var(--border-width));
    padding: 0.375rem 0.75rem;
}

.btn-outline-cta.btn-md .content {
    border-radius: calc(0.375rem - var(--border-width));
    padding: 0.5rem 1rem;
}

.btn-outline-cta.btn-lg .content {
    border-radius: calc(0.5rem - var(--border-width));
    padding: 0.75rem 1.5rem;
}

.btn-outline-cta.btn-xl .content {
    border-radius: calc(0.5rem - var(--border-width));
    padding: 1rem 2rem;
}

.btn-outline-primary {
    background-color: transparent;
    color: var(--color-primary-500);
    border: 1px solid var(--color-primary-500);
}

.btn-outline-primary svg path {
    fill: var(--color-primary-500);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary-500);
    color: var(--color-white);
    border: 1px solid var(--color-primary-500);
}

.btn-outline-primary:hover svg path {
    fill: var(--color-white);
}

.btn-outline-gray {
    background-color: transparent;
    color: var(--color-gray-800);
    border: 1px solid var(--color-gray-800);
}

.btn-outline-gray svg path {
    fill: var(--color-gray-800);
}

.btn-outline-gray:hover {
    background-color: var(--color-gray-800);
    color: var(--color-white);
    border: 1px solid var(--color-gray-800);
}

.btn-outline-gray:hover svg path {
    fill: var(--color-white);
}

.btn-outline-white {
    border: 1px solid var(--color-white);
    color: var(--color-white);
}

.btn-outline-white:hover {
    border-color: var(--color-accent-300);
    color: var(--color-accent-300);
}

.btn-outline-white:hover svg path {
    transition: all 0.3s ease-in-out;
}

.btn-outline-white:hover svg path {
    fill: var(--color-accent-300);
}

/* ===========================
   SHADOW UTILITIES
=========================== */
/* No shadow */
.shadow-none {
    box-shadow: none !important;
}

/* Small shadow */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Default shadow */
.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 
              0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Medium shadow */
.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
              0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Large shadow */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
              0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Extra large shadow */
.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
              0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* 2XL shadow */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Inner shadow */
.shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Outline shadow */
.shadow-outline {
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5) !important;
}

/* Outline shadow on focus (commonly used for forms) */
.shadow-outline-gray {
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.5) !important;
}

/* Default hover shadow (optional) */
.shadow-hover:hover {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 
              0 2px 4px -1px rgba(0,0,0,0.06) !important;
}

/* ===========================
   COLOR MODIFIERS
=========================== */
/* ===== Background Colors ===== */
.bg-black { background: var(--color-black) !important; }
.bg-white { background: var(--color-white) !important; }

.bg-faq-grad { background: var(--faq-grad-bg) !important; }
.bg-brand-linear { background: var(--brand-linear-bg) !important; }

.bg-grad-grey { background: var(--grad-grey-bg) !important; }
.bg-primary-secondary { background: var(--primary-secondary-bg) !important; }
.bg-secondary-primary { background: var(--secondary-primary-bg) !important; }

.bg-primary-50 { background-color: var(--color-primary-50) !important; }
.bg-primary-100 { background-color: var(--color-primary-50) !important; }
.bg-primary-200 { background-color: var(--color-primary-200) !important; }
.bg-primary-300 { background-color: var(--color-primary-300) !important; }
.bg-primary-400 { background-color: var(--color-primary-400) !important; }
.bg-primary-500 { background-color: var(--color-primary-500) !important; }
.bg-primary-600 { background-color: var(--color-primary-600) !important; }
.bg-primary-700 { background-color: var(--color-primary-700) !important; }
.bg-primary-800 { background-color: var(--color-primary-800) !important; }
.bg-primary-900 { background-color: var(--color-primary-900) !important; }
.bg-primary-muted { background-color: var(--color-primary-muted) !important; }
.bg-primary-muted-1000 { background-color: var(--color-primary-muted-1000) !important; }

.bg-gray-50 { background-color: var(--color-gray-50) !important; }
.bg-gray-100 { background-color: var(--color-gray-100) !important; }
.bg-gray-200 { background-color: var(--color-gray-200) !important; }
.bg-gray-300 { background-color: var(--color-gray-300) !important; }
.bg-gray-400 { background-color: var(--color-gray-400) !important; }
.bg-gray-500 { background-color: var(--color-gray-500) !important; }
.bg-gray-600 { background-color: var(--color-gray-600) !important; }
.bg-gray-700 { background-color: var(--color-gray-700) !important; }
.bg-gray-800 { background-color: var(--color-gray-800) !important; }
.bg-gray-900 { background-color: var(--color-gray-900) !important; }

.bg-accent-50 { background-color: var(--color-accent-50) !important; }
.bg-accent-100 { background-color: var(--color-accent-100) !important; }
.bg-accent-200 { background-color: var(--color-accent-200) !important; }
.bg-accent-300 { background-color: var(--color-accent-300) !important; }
.bg-accent-400 { background-color: var(--color-accent-400) !important; }
.bg-accent-500 { background-color: var(--color-accent-500) !important; }
.bg-accent-600 { background-color: var(--color-accent-600) !important; }
.bg-accent-700 { background-color: var(--color-accent-700) !important; }
.bg-accent-800 { background-color: var(--color-accent-800) !important; }
.bg-accent-900 { background-color: var(--color-accent-900) !important; }

.bg-secondary-50 { background-color: var(--color-secondary-50) !important; }
.bg-secondary-100 { background-color: var(--color-secondary-100) !important; }
.bg-secondary-200 { background-color: var(--color-secondary-200) !important; }
.bg-secondary-300 { background-color: var(--color-secondary-300) !important; }
.bg-secondary-400 { background-color: var(--color-secondary-400) !important; }
.bg-secondary-500 { background-color: var(--color-secondary-500) !important; }
.bg-secondary-600 { background-color: var(--color-secondary-600) !important; }
.bg-secondary-700 { background-color: var(--color-secondary-700) !important; }
.bg-secondary-800 { background-color: var(--color-secondary-800) !important; }
.bg-secondary-900 { background-color: var(--color-secondary-900) !important; }

.bg-neutral-50 { background-color: var(--color-neutral-50) !important; }
.bg-neutral-100 { background-color: var(--color-neutral-100) !important; }
.bg-neutral-200 { background-color: var(--color-neutral-200) !important; }
.bg-neutral-300 { background-color: var(--color-neutral-300) !important; }
.bg-neutral-400 { background-color: var(--color-neutral-400) !important; }
.bg-neutral-500 { background-color: var(--color-neutral-500) !important; }
.bg-neutral-600 { background-color: var(--color-neutral-600) !important; }
.bg-neutral-700 { background-color: var(--color-neutral-700) !important; }
.bg-neutral-800 { background-color: var(--color-neutral-800) !important; }
.bg-neutral-900 { background-color: var(--color-neutral-900) !important; }

.bg-success-100 { background-color: var(--color-success-100) !important; }
.bg-success-500 { background-color: var(--color-success-500) !important; }
.bg-success-700 { background-color: var(--color-success-700) !important; }

.bg-warning-100 { background-color: var(--color-warning-100) !important; }
.bg-warning-500 { background-color: var(--color-warning-500) !important; }
.bg-warning-700 { background-color: var(--color-warning-700) !important; }

.bg-error-100 { background-color: var(--color-error-100) !important; }
.bg-error-500 { background-color: var(--color-error-500) !important; }
.bg-error-700 { background-color: var(--color-error-700) !important; }

.bg-info-100 { background-color: var(--color-info-100) !important; }
.bg-info-500 { background-color: var(--color-info-500) !important; }
.bg-info-700 { background-color: var(--color-info-700) !important; }

/* ===== Text Colors ===== */
.text-black { color: var(--color-black) !important; }
.text-white { color: var(--color-white) !important; }

.text-primary-50 { color: var(--color-primary-50) !important; }
.text-primary-100 { color: var(--color-primary-50) !important; }
.text-primary-200 { color: var(--color-primary-200) !important; }
.text-primary-300 { color: var(--color-primary-300) !important; }
.text-primary-400 { color: var(--color-primary-400) !important; }
.text-primary-500 { color: var(--color-primary-500) !important; }
.text-primary-600 { color: var(--color-primary-600) !important; }
.text-primary-700 { color: var(--color-primary-700) !important; }
.text-primary-800 { color: var(--color-primary-800) !important; }
.text-primary-900 { color: var(--color-primary-900) !important; }
.text-primary-muted { color: var(--color-primary-muted) !important; }
.text-primary-muted-1000 { color: var(--color-primary-muted-1000) !important; }

.text-gray-50 { color: var(--color-gray-50) !important; }
.text-gray-100 { color: var(--color-gray-100) !important; }
.text-gray-200 { color: var(--color-gray-200) !important; }
.text-gray-300 { color: var(--color-gray-300) !important; }
.text-gray-400 { color: var(--color-gray-400) !important; }
.text-gray-500 { color: var(--color-gray-500) !important; }
.text-gray-600 { color: var(--color-gray-600) !important; }
.text-gray-700 { color: var(--color-gray-700) !important; }
.text-gray-800 { color: var(--color-gray-800) !important; }
.text-gray-900 { color: var(--color-gray-900) !important; }

.text-accent-50 { color: var(--color-accent-50) !important; }
.text-accent-100 { color: var(--color-accent-100) !important; }
.text-accent-200 { color: var(--color-accent-200) !important; }
.text-accent-300 { color: var(--color-accent-300) !important; }
.text-accent-400 { color: var(--color-accent-400) !important; }
.text-accent-500 { color: var(--color-accent-500) !important; }
.text-accent-600 { color: var(--color-accent-600) !important; }
.text-accent-700 { color: var(--color-accent-700) !important; }
.text-accent-800 { color: var(--color-accent-800) !important; }
.text-accent-900 { color: var(--color-accent-900) !important; }

.text-secondary-50 { color: var(--color-secondary-50) !important; }
.text-secondary-100 { color: var(--color-secondary-100) !important; }
.text-secondary-200 { color: var(--color-secondary-200) !important; }
.text-secondary-300 { color: var(--color-secondary-300) !important; }
.text-secondary-400 { color: var(--color-secondary-400) !important; }
.text-secondary-500 { color: var(--color-secondary-500) !important; }
.text-secondary-600 { color: var(--color-secondary-600) !important; }
.text-secondary-700 { color: var(--color-secondary-700) !important; }
.text-secondary-800 { color: var(--color-secondary-800) !important; }
.text-secondary-900 { color: var(--color-secondary-900) !important; }

.text-neutral-50 { color: var(--color-neutral-50) !important; }
.text-neutral-100 { color: var(--color-neutral-100) !important; }
.text-neutral-200 { color: var(--color-neutral-200) !important; }
.text-neutral-300 { color: var(--color-neutral-300) !important; }
.text-neutral-400 { color: var(--color-neutral-400) !important; }
.text-neutral-500 { color: var(--color-neutral-500) !important; }
.text-neutral-600 { color: var(--color-neutral-600) !important; }
.text-neutral-700 { color: var(--color-neutral-700) !important; }
.text-neutral-800 { color: var(--color-neutral-800) !important; }
.text-neutral-900 { color: var(--color-neutral-900) !important; }

.text-success-100 { color: var(--color-success-100) !important; }
.text-success-500 { color: var(--color-success-500) !important; }
.text-success-700 { color: var(--color-success-700) !important; }

.text-warning-100 { color: var(--color-warning-100) !important; }
.text-warning-500 { color: var(--color-warning-500) !important; }
.text-warning-700 { color: var(--color-warning-700) !important; }

.text-error-100 { color: var(--color-error-100) !important; }
.text-error-500 { color: var(--color-error-500) !important; }
.text-error-700 { color: var(--color-error-700) !important; }

.text-info-100 { color: var(--color-info-100) !important; }
.text-info-500 { color: var(--color-info-500) !important; }
.text-info-700 { color: var(--color-info-700) !important; }

/* ===========================
   BODY TEXT STYLES
=========================== */
.text-body-xs {
    font-family: var(--font-body) !important;
    font-size: var(--font-body-xs) !important;
    line-height: var(--line-body-xs) !important;
}

.text-body-xs-plus {
    font-family: var(--font-body) !important;
    font-size: var(--font-body-xs-plus) !important;
    line-height: var(--line-body-xs-plus) !important;
}

.text-body-sm {
    font-family: var(--font-body) !important;
    font-size: var(--font-body-sm) !important;
    line-height: var(--line-body-sm) !important;
}

.text-body-base {
    font-family: var(--font-body) !important;
    font-size: var(--font-body-base) !important;
    line-height: var(--line-body-base) !important;
}

.text-body-base-plus {
    font-family: var(--font-body) !important;
    font-size: var(--font-body-base-plus) !important;
    line-height: var(--line-body-base-plus) !important;
}

.text-body-lg {
    font-family: var(--font-body) !important;
    font-size: var(--font-body-lg) !important;
    line-height: var(--line-body-lg) !important;
}


/* ===========================
   HEADING TEXT STYLES
=========================== */
.heading-h1 {
    font-family: var(--font-heading) !important;
    font-size: var(--font-h1) !important;
    line-height: var(--line-h1) !important;
}

.heading-h2 {
    font-family: var(--font-heading) !important;
    font-size: var(--font-h2) !important;
    line-height: var(--line-h2) !important;
}

.heading-h3 {
    font-family: var(--font-heading) !important;
    font-size: var(--font-h3) !important;
    line-height: var(--line-h3) !important;
}

.heading-h4 {
    font-family: var(--font-heading) !important;
    font-size: var(--font-h4) !important;
    line-height: var(--line-h4) !important;
}

.heading-h5 {
    font-family: var(--font-heading) !important;
    font-size: var(--font-h5) !important;
    line-height: var(--line-h5) !important;
}

.heading-h6 {
    font-family: var(--font-heading) !important;
    font-size: var(--font-h6) !important;
    line-height: var(--line-h6) !important;
}

.card-common_heading {
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 140%;
    font-weight: var(--font-weight-bold);
    transition: all 0.3s ease-in-out;
}

/* ===========================
   CUSTOM STYLES
=========================== */
/* Body Overlay */
.body-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

.body-overlay.active {
    opacity: 1;
    visibility: visible;
}

body.overlay-active {
    overflow: hidden;
}

.overlay-z {
    z-index: 9999 !important;
}

/* Quote Floating Button */
#quote-float-btn {
    position: fixed;
    bottom: 5rem;
    right: 1.75rem;
    z-index: 998;
    background: var(--primary-secondary-bg);
    color: #fff;
    border: none;
    padding: 6px 16px 7px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: 0.3s ease;
    height: 2rem;
}

#quote-float-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Slide-down hide effect for Quote button */
#quote-float-btn.hide-quote {
    transform: translateY(400%) !important;
}

/* Modal */
.modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: #fff;
    width: 90%;
    max-width: 650px;
    max-height: 500px;
    overflow-y: auto;
    padding: 1.75rem;
    border-radius: 1rem;
    opacity: 0;
    z-index: 9999;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(.25,.8,.25,1);
}

.modal-container.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.modal-close {
    font-size: 1.75rem;
    cursor: pointer;
    float: right;
}

/* Whatsapp Floating Button */
#whatsapp-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(180deg,#25d366 0%, #1ebe56 100%);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(37,211,102,0.28);
    z-index: 998;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

#whatsapp-float::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    left: 0; top: 0;
    box-shadow: 0 0 0 0 rgba(37,211,102,0.25);
    animation: pulse 2.6s infinite;
    z-index: -1;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.25); }
    70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

#whatsapp-float:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 30px rgba(37,211,102,0.22);
}

#whatsapp-float:focus {
    outline: 3px solid rgba(37,211,102,0.18);
    outline-offset: 3px;
}

/* Slide-down hide effect */
#whatsapp-float.hide-whatsapp {
    transform: translateY(160%) !important;
}

/* ===== Header ===== */
.header {
    background-color: var(--color-white);
    position: relative;
    z-index: 999;
}

/* Topbar */
.topbar {
    background-color: var(--color-primary-800);
    color: var(--color-white);
    font-size: var(--font-body-xs-plus);
    position: relative;
    z-index: 1;
    padding: 0.375rem 0;
    height: 2rem;
}

.topbar a {
    color: var(--color-white);
}

.topbar a:hover {
    color: var(--color-accent-300);
}

.topbar a:hover svg path {
    fill: var(--color-accent-300);
    stroke: var(--color-accent-300);
}

/* Header Search */
#searchHeader {
    position: relative;
}

#searchBoxWrap {
    width: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 0;
}

#searchBox {
    padding: 0 1.25rem 0 0.75rem;
    border-radius: 0.25rem;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-white);
    width: 100%;
}

#searchBox:focus {
    outline: 0;
}

#searchBoxWrap.active {
    width: 20rem;
    opacity: 1;
}

#searchToggle {
    position: relative;
    z-index: 0;
    cursor: pointer;
}

#searchSuggestions {
    position: absolute;
    right: 0;
    top: calc(100% + 0.375rem);
    border-radius: 0.25rem;
    background-color: var(--color-white);
    width: 20rem;
}

#searchSuggestions > li {
    color: var(--color-gray-900);
    font-size: var(--font-body-xs-plus);
    font-weight: var(--font-weight-medium);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}

#searchSuggestions > li:hover {
    background-color: var(--color-primary-50);
}

/* Navbar */
.navbar {
    position: relative;
    /* z-index: 1; */
    padding: 0.5rem 0;
}

.fixed-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 998;
    background: #fff; /* optional */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* optional */
}

.navlist > li {
    position: relative;
}

.navlist > li > a {
    font-size: var(--font-body-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.navlist > li > a:hover {
    color: var(--color-primary-500);
}

/* Megamenu*/
.mega-menu {
    background-color: var(--color-white);
    border-top: 1px solid var(--color-gray-300);
    position: fixed;
    left: 0;
    width: 100%;
    top: 128px;
    /* display: none; */
    z-index: 40;
    padding: 3rem 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-height: 500px;
    overflow-y: auto;
}

.mega-dropdown {
    position: absolute;
    top: 59px;
    min-width: 250px;
    padding: 1.5rem 0;
}

.fixed-navbar .mega-menu {
    top: 96px;
}

.fixed-navbar .mega-dropdown {
    top: 59px;
}

.mega-nav {
    background-color: var(--color-primary-50);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.mega-nav > li {
    cursor: pointer;
    font-size: var(--font-body-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    position: relative;
}

.mega-nav > li:hover,
.mega-nav > li.active {
    color: var(--color-primary-500);
}

.mega-nav > li[data-target] {
    position: relative;
}

.mega-nav > li[data-target]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    opacity: 0;
    transition: opacity 0.2s ease;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2.5L8 6L4.5 9.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(1746%) hue-rotate(212deg) brightness(94%) contrast(70%);
}

.mega-nav > li[data-target]:hover::after,
.mega-nav > li.active[data-target]::after {
    opacity: 1;
}

.mega-content-heading {
    font-size: var(--font-body-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 1.5rem;
}

.mega-links-list > li > a {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-body-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
}

.mega-links-list > li > a:hover {
    color: var(--color-primary-500);
}

.mega-links-list > li > a img {
    width: 22px;
}

.mega-lets-talk {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
}

.mega-lets-talk-heading {
    font-size: var(--font-body-lg);
    font-weight: var(--font-weight-semibold);
}

.mega-lets-talk > p {
    font-size: var(--font-body-sm);
    margin-bottom: 0.5rem;
}

.mega-lets-talk.boxed {
    margin-top: 0;
    background-color: var(--color-primary-50);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.meganav-blogs {
    border-top: 1px dashed var(--color-primary-500);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.meganav-blogs-carousel .blog-card {
    flex-direction: row;
    margin-bottom: 0 !important;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.meganav-blogs-carousel .blog-thumb {
    width: 30%;
}

.meganav-blogs-carousel .blog-thumb-content {
    width: 70%;
}

.meganav-blogs-carousel .blog-category-chip {
    font-size: 0.625rem;
}

.meganav-blogs-carousel .blog-thumb-title {
    font-size: var(--font-body-xs);
}

.meganav-blogs-carousel .blog-thumb-meta {
    display: none;
}


/* ===== HOMEPAGE ===== */
/* ===== Main ===== */
.main {
    position: relative;
    z-index: 1;
}

/* HP Hero */
.home-hero-section {
    background-color: var(--color-primary-50);
    padding: 1.77rem 0;
    position: relative;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-heading {
    font-size: var(--font-h2);
    line-height: var(--line-h2);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
}

.hero-subheading {
    font-size: var(--font-h5);
    line-height: var(--line-h5);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 2rem;
}

.cursor {
    display: inline-block;
    margin-left: 2px;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

.hero-desc {
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    font-weight: var(--font-weight-medium);
    margin-bottom: 2.25rem;
}

.hero-cta-buttons {
    display: flex;
    gap: 1.5rem;
}

.hero-right {
    position: relative;
    display: flex;
    justify-content: end;
}

.hero-insurance-drop {
    background-color: var(--color-primary-800);
    border: 0.25rem solid var(--color-white);
    width: 6rem;
    height: 6rem;
    border-radius: 50% 50% 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 5rem;
    left: 3rem;
}

.hero-google-rating {
    background-color: var(--color-white);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    gap: 0.375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
    max-width: 9.75rem;
    position: absolute;
    top: 1.75rem;
    right: 0;
}

.hero-google-rating > div {
    display: flex;
    flex-direction: column;
}

.hero-google-rating > div > p {
    font-size: var(--font-body-xs);
    line-height: var(--line-body-xs);
    margin: 0;
}

.hero-google-rating > div > div {
    display: flex;
    gap: 0.25rem;
}

.hero-customers-stats {
    color: var(--color-neutral-900);
    width: 156px;
    height: 100px;
    background-color: var(--color-white);
    margin: 35px 0;
    position: absolute;
    bottom: 0;
    left: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-customers-stats::before,
.hero-customers-stats::after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    border-left: 4.875rem solid transparent;
    border-right: 4.875rem solid transparent;
}

.hero-customers-stats::before {
    top: -2.5rem;
    border-bottom: 2.5rem solid var(--color-white);
}

.hero-customers-stats::after {
    bottom: -2.5rem;
    border-top: 2.5rem solid var(--color-white);
}

.happy-number {
    font-size: 1.75rem;
    font-weight: var(--font-weight-semibold);
    line-height: 100%;
    margin-bottom: 0.5rem;
}

.happy-number > span {
    display: none;
}

.avatars-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.avatar-item {
    background-color: #C7D4F2;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    height: 1.875rem;
    width: 1.875rem;
    margin-left: -0.5rem;
}

.avatar-item > img {
    border-radius: 50%;
    width: 100%;
}

.avatars__item:first-child {
    z-index: 5;
}

.avatars__item:nth-child(2) {
    z-index: 4;
}

.avatars__item:nth-child(3) {
    z-index: 3;
}

.avatars__item:nth-child(4) {
    z-index: 2;
}

.avatars__item:nth-child(5) {
    z-index: 1;
}

.avatars__item:last-child {
    z-index: 0;
}

.happy-text {
    font-size: var(--font-body-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-body-xs);
    margin-top: 0.25rem;
}

.hero-target-icon {
    position: absolute;
    bottom: 20px;
    right: 76px;
    z-index: 9;
}

.hero-rounded-rectangle-bg {
    background-color: var(--color-primary-800);
    width: 396px;
    height: 78px;
    border-radius: 100px;
    position: absolute;
    right: 0;
    top: 115px;
    z-index: 1;
    transform: rotate(-27deg);
}

.hero-triangle-bg {
    width: 0;
    height: 0;
    border-left: 770px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 400px solid var(--color-primary-800);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* HP About */
.hp-about-left {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    position: relative;
    padding-bottom: 13.2rem;
}

.hp-about-img1 {
    width: 53%;
}

.hp-about-img2 {
    width: 59%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.hp-about-img1 > img,
.hp-about-img2 > img {
    border-radius: 2.25rem 0 0 0;
}

.hp-about-dots-grid img {
    position: absolute;
    left: 30px;
}

.hp-about-dots-grid img:nth-child(1) {
    bottom: 232px;
}

.hp-about-dots-grid img:nth-child(2) {
    bottom: 174px;
}

.hp-about-dots-grid img:nth-child(3) {
    bottom: 116px;
}

.hp-about-dots-grid img:nth-child(4) {
    bottom: 58px;
}

.hp-about-dots-grid img:nth-child(5) {
    bottom: 0;
}

.hp-about-dots-grid img:nth-child(5) circle {
    fill: red !important;
}

.hp-about-experience {
    background-color: var(--color-primary-800);
    padding: 1.25rem;
    border-radius: 2.25rem 2.25rem 2.25rem 0;
    box-shadow: 0 8px 30px rgba(0, 46, 59, 0.3);
    color: var(--color-white);
    width: 42%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 2.4rem;
}

.hp-about-experience .years-number {
    font-size: 3rem;
    font-weight: var(--font-weight-semibold);
    line-height: 100%;
}

.hp-about-experience .years-text {
    font-size: var(--font-body-base-plus);
    line-height: var(--line-body-base-plus);
    font-weight: var(--font-weight-medium);
}

.hp-about-experience .experience-desc {
    font-size: var(--font-body-xs-plus);
    line-height: var(--line-body-xs-plus);
    font-weight: var(--font-weight-regular);
}

.section-heading {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.section-heading .heading-copy {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.section-heading .subheading {
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-500);
    text-transform: uppercase;
}

.section-heading .title {
    font-size: var(--font-h3);
    line-height: var(--line-h3);
    font-weight: var(--font-weight-bold);
}

.section-heading .title-h4 {
    font-size: var(--font-h4);
    line-height: var(--line-h4);
}

.section-heading .title-h5 {
    font-size: var(--font-h5);
    line-height: var(--line-h5);
}

.section-heading hr {
    background-color: var(--color-gray-900);
    height: 0.375rem;
    border-radius: 9999rem;
    border: none;
    width: 9.375rem;
    margin: 0;
}

.section-heading.center {
    text-align: center;
}

.section-heading.center hr {
    margin: 0 auto;
}

.section-heading.left-hr {
    padding: 0.25rem 0 0.25rem 1.125rem;
    /* margin-bottom: 0; */
}

.section-heading.left-hr hr {
    width: 0.375rem;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.section-desc {
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
}

.hp-about-pointers {
    padding: 1.5rem 0 2rem;
}

.pointer-card {
    display: flex;
    align-items: start;
    gap: 1rem;
}

.pointer-card__copy {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

.pointer-card__desc {
    margin: 0;
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-medium);
}

/* HP Services */
.hp-services-card {
    background-color: var(--color-primary-50);
    border-radius: 1rem;
    padding: 1rem;
    flex-direction: column;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.hp-services-card__icon {
    background-color: var(--color-white);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.3s ease-in-out;
}

.hp-services-card__readmore {
    font-size: var(--font-body-xs-plus);
    font-weight: var(--font-weight-medium);
    opacity: 0;
    visibility: hidden;
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: auto;
}

.hp-services-card__readmore::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' viewBox='0 0 24 14' fill='none'%3E%3Cpath d='M18.7495 7.49939H5.25052C4.83055 7.49939 4.50058 7.16942 4.50058 6.74945C4.50058 6.32949 4.83055 5.99951 5.25052 5.99951H18.7495C19.1694 5.99951 19.4994 6.32949 19.4994 6.74945C19.4994 7.16942 19.1694 7.49939 18.7495 7.49939Z' fill='%234DC4F0'/%3E%3Cpath d='M14.9998 12.749C14.9014 12.7502 14.8039 12.7308 14.7135 12.6921C14.6231 12.6533 14.5418 12.5961 14.4748 12.524C14.1748 12.2241 14.1748 11.7591 14.4748 11.4591L19.1994 6.7345L14.4748 2.00987C14.1748 1.70989 14.1748 1.24493 14.4748 0.944953C14.7748 0.644977 15.2397 0.644977 15.5397 0.944953L20.7893 6.19454C21.0893 6.49452 21.0893 6.95948 20.7893 7.25946L15.5397 12.5091C15.3897 12.659 15.1947 12.734 15.0148 12.734L14.9998 12.749Z' fill='%234DC4F0'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    vertical-align: middle;
    transform: rotate(-35deg);
}

.hp-services-card:hover {
    background-color: var(--color-primary-800);
    color: var(--color-white);
}

.hp-services-card:hover .card-common_heading {
    color: var(--color-primary-300);
}

.hp-services-card:hover .hp-services-card__readmore {
    opacity: 1;
    visibility: visible;
    color: var(--color-accent-300);
}

/* HP Advantages */
.advantages-card {
    flex-direction: column;
    text-align: center;
}

.advantages-card .pointer-card__icon {
    margin: 0 auto;
}

/* HP Most Popular Plans */
.plan-card {
    background-color: #e8e8e8;
    border-radius: 1rem;
    border: 1px solid #bebebe;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    min-height: 300px;
}

.plan-chip {
    background-color: #C1DFFD;
    border: 1px solid #A3C8E0;
    border-radius: 0.375rem;
    padding: 0.25rem 0.625rem ;
    color: #004A6E;
    display: inline-flex;
    font-size: var(--font-body-xs);
    line-height: var(--line-body-xs);
    font-weight: var(--font-weight-medium);
}

.plan-copy {
    padding: 1rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.plan-features {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.plan-features li {
    font-size: var(--font-body-xs-plus);
    line-height: var(--line-body-xs-plus);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    position: relative;
    padding-left: 1rem;
}

.plan-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    background: url('../images/icons/shield-check-colored-14x14.svg') no-repeat center / contain;
}

.plan-card .btn {
    margin-top: auto;
}

/* .section-heading-with-right-col {
    margin-bottom: 1.5rem;
} */

.custom-carousel-nav {
    display: flex;
    justify-content: end;
    gap: 0.25rem;
}

.custom-carousel-nav > button {
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    padding: 0.6rem 0.8rem; 
    border-radius: 3rem;
    transition: all 0.3s ease-in-out;;
}

.custom-carousel-nav > button svg path {
    fill: var(--color-gray-800);
}

.custom-carousel-nav > button:hover {
    background-color: var(--color-primary-500);
}

.custom-carousel-nav > button:hover svg path {
    fill: var(--color-white);
}

.custom-carousel-nav.parent-center {
    position: absolute;
    top: 45%;
    transform: translateY(-45%);
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
}

.custom-carousel-nav.parent-center button:first-child {
    left: 0;
    position: absolute;
}

.custom-carousel-nav.parent-center button:last-child {
    right: 0;
    position: absolute;
}

.custom-carousel-nav.p-0 button {
    padding: 0 !important;
}

.custom-carousel-nav.bg-transparent button {
    background-color: transparent !important;
    border: none !important;
}

.custom-carousel-nav.light > button svg path {
    fill: var(--color-white);
}

/* plan card peach */
.plan-card.peach {
    background-color: #FFEBD6;
    border-color: #FFD1A8;
}

.plan-card.peach .plan-chip {
    background-color: #FFD1A8;
    border-color: #FFB678;
    color: #6E3D00;
}

/* plan card blue */
.plan-card.blue {
    background-color: #D0F0FF;
    border-color: #A3D8FF;
}

.plan-card.blue .plan-chip {
    background-color: #A3D8FF;
    border-color: #78B4E6;
    color: #00335A;
}

/* plan card lavender */
.plan-card.lavender {
    background-color: #E5DBFF;
    border-color: #C0B0FF;
}

.plan-card.lavender .plan-chip {
    background-color: #C0B0FF;
    border-color: #A387FF;
    color: #3A0066;
}

/* plan card green */
.plan-card.green {
    background-color: #DFFFE6;
    border-color: #B8F1C0;
}

.plan-card.green .plan-chip {
    background-color: #B8F1C0;
    border-color: #8FD9A0;
    color: #004D2E;
}

/* plan card pink */
.plan-card.pink {
    background-color: #FFD6E0;
    border-color: #FFADC4;
}

.plan-card.pink .plan-chip {
    background-color: #FFADC4;
    border-color: #FF85A3;
    color: #660022;
}

/* plan card beige */
.plan-card.beige {
    background-color: #FFE6CC;
    border-color: #FFB380;
}

.plan-card.beige .plan-chip {
    background-color: #FFB380;
    border-color: #FF8C4D;
    color: #330000;
}

/* plan card yellow */
.plan-card.yellow {
    background-color: #FFF4CC;
    border-color: #FFE699;
}

.plan-card.yellow .plan-chip {
    background-color: #FFE699;
    border-color: #FFD966;
    color: #665200;
}

/* plan card mint */
.plan-card.mint {
    background-color: #D6FFF6;
    border-color: #A8F7E8;
}

.plan-card.mint .plan-chip {
    background-color: #A8F7E8;
    border-color: #7BEBD8;
    color: #004D40;
}

/* plan card coral */
.plan-card.coral {
    background-color: #FFE2E0;
    border-color: #FFB8B3;
}

.plan-card.coral .plan-chip {
    background-color: #FFB8B3;
    border-color: #FF8A82;
    color: #5C0000;
}

/* plan card sky-purple */
.plan-card.sky-purple {
    background-color: #F0E6FF;
    border-color: #D3C2FF;
}

.plan-card.sky-purple .plan-chip {
    background-color: #D3C2FF;
    border-color: #B49AFF;
    color: #2E0066;
}

/* HP Process */
.process-card {
    flex-direction: column;
    text-align: center;
    position: relative;
}

.process-card .pointer-card__icon {
    background-color: var(--color-white);
    width: 80px;
    height: 80px;
    border-radius: 1.5rem 1.5rem 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 1;
}

.process-card:nth-child(2) .pointer-card__icon,
.process-card:nth-child(3) .pointer-card__icon,
.process-card:nth-child(4) .pointer-card__icon {
    border-radius: 1.5rem;
}

.process-card:last-child .pointer-card__icon {
    border-radius: 1.5rem 1.5rem 0 1.5rem;
}

.process-card::after {
    content: '';
    width: 100%;
    height: 3px;
    border: 3px dashed var(--color-gray-300);
    position: absolute;
    top: 20%;
    left: 50%;
    z-index: 0;
}

.process-card::before {
    content: '';
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-neutral-500);
    border: 2px solid var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2.5L8 6L4.5 9.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 15.5%;
    right: -10%;
    z-index: 1;
    padding: 4px;
}

.process-card:last-child::before,
.process-card:last-child::after {
    display: none;
}

/* HP Calculator */
.hp-calculator-card {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    border-radius: 1rem;
    flex-direction: column;
    position: relative;
    padding: 3rem 1rem 1.5rem;
    gap: 1.5rem;
}

.hp-calculator-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.8) 40% );
    border-radius: 1rem;
}

.hp-calculator-card .pointer-card__icon {
    background-color: var(--color-gray-300);
    border: 1px solid var(--color-gray-500);
    outline: 3px solid var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 64px;
    height: 64px;
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.hp-calculator-card .card-common_heading,
.hp-calculator-card .pointer-card__desc {
    color: var(--color-white);
    z-index: 1;
}

.hp-calculator-card .btn {
    position: relative;
    z-index: 1;
    margin-top: auto;
}

/* calculator card peach */
.hp-calculator-card.peach .pointer-card__icon {
    background-color: #FFD1A8;
    border-color: #FFB678;
}

/* calculator card blue */
.hp-calculator-card.blue .pointer-card__icon {
    background-color: #A3D8FF;
    border-color: #78B4E6;
}

/* calculator card lavender */
.hp-calculator-card.lavender .pointer-card__icon {
    background-color: #C0B0FF;
    border-color: #A387FF;
}

/* calculator card green */
.hp-calculator-card.green .pointer-card__icon {
    background-color: #B8F1C0;
    border-color: #8FD9A0;
}

/* calculator card pink */
.hp-calculator-card.pink .pointer-card__icon {
    background-color: #FFADC4;
    border-color: #FF85A3;
}

/* calculator card beige */
.hp-calculator-card.beige .pointer-card__icon {
    background-color: #FFB380;
    border-color: #FF8C4D;
}

/* calculator card yellow */
.hp-calculator-card.yellow .pointer-card__icon {
    background-color: #FFE699;
    border-color: #FFD966;
}

/* HP Google Reviews Carousel */
.g-review-card {
    background: var(--faq-grad-bg);
    border: 1px solid var(--color-gray-300);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease-in-out;
    min-height: 300px;
}

.owl-carousel .g-review-card {
    margin-bottom: 2rem;
}

.g-review-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.g-review-card-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.g-review-card-user > .user-profile-image {
    width: 40px !important;
    border-radius: 50%;
}

.g-review-card-user .user-name {
    font-size: var(--font-body-sm);
    line-height: var(--font-body-sm);
    font-weight: var(--font-weight-bold);
}

.g-review-card-user .review-date {
    font-size: var(--font-body-xs-plus);
    line-height: var(--font-body-xs-plus);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.g-review-g-logo {
    width: 24px !important;
}

.g-review-card-rating {
    display: flex;
    align-items: center;
}

.g-review-card-rating > img {
    width: 1.125rem !important;
}

.g-review-copy {
    color: var(--color-gray-800);
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-medium);
}

.g-review-card:hover {
    border-color: var(--color-primary-400);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* HP Partners */
.partners-logo-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.partners-logo-grid img {
    width: 12rem;
    height: 3rem;
}

.partners-logo-grid img {
    transition: filter 0.3s ease;
}

.partners-logo-grid img:hover {
    filter: grayscale(100%);
}

/* HP Faq*/
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: var(--faq-grad-bg);
    border: 1px solid var(--color-gray-300);
    cursor: pointer;
    padding: 1rem;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-question {
    position: relative;
    padding-right: 2rem;
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 140%;
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    transition: all 0.3s ease-in-out;
}

.faq-question::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s;
}

.faq-answer {
    display: none;
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
}

.faq-item.active {
    border-color: var(--color-primary-400);
    border-width: 1px 1px 4px 4px;
}

.faq-item.active .faq-question {
    color: var(--color-primary-500);
}

.faq-item.active .faq-question::after {
    transform: translateY(-50%) rotate(180deg);
}

/* HP Blogs Carousel*/
.blog-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease-in-out;
}

.owl-carousel .blog-card {
    margin-bottom: 2rem;
}

.blog-thumb img {
    border-radius: 0.5rem;
}

.blog-thumb-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
} 

.blog-thumb-category-chips {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.blog-category-chip {
    background-color: var(--color-primary-50);
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: var(--font-body-xs);
    line-height: var(--line-body-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-500);
}

.blog-category-chip:hover {
    background-color: var(--color-primary-500);
    color: var(--color-white);
}

.blog-thumb-title {
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 140%;
    font-weight: var(--font-weight-bold);
    transition: all 0.3s ease-in-out;
}

.blog-thumb-meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
}

.blog-thumb-author,
.blog-thumb-date {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.blog-thumb-author img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
}

.blog-thumb-author span,
.blog-thumb-date span {
    font-size: var(--font-body-xs-plus);
    line-height: var(--line-body-xs-plus);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
}

.blog-thumb-date img {
    width: 18px !important;
}

.blog-card:hover {
    border-color: var(--color-primary-400);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.blog-card:hover .blog-thumb-title {
    color: var(--color-primary-500);
}

/* ===== Footer ===== */
.footer-cta {
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    top: 6rem;
    padding: 0 1rem;
}

.footer-cta-inner {
    background: var(--grad-grey-bg);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 2rem;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.footer-cta-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.footer-cta-heading {
    font-size: var(--font-h5);
    line-height: var(--line-h5);
    font-weight: var(--font-weight-bold);
    padding-right: 5rem;
}

.footer-cta-copy > p {
    font-size: var(--font-body-base);
    font-weight: var(--font-weight-base);
    line-height: var(--line-body-sm);
    margin-bottom: 0.5rem;
}

.footer-cta-image {
    position: absolute;
    right: 5px;
    bottom: 0;
    z-index: 1;
}

.footer-cta-linear-circle {
    width: 687px;
    height: 687px;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 85, 0) 15%,
        rgba(77, 196, 240, 1) 93%
    );
    position: absolute;
    top: -80px;
    right: -22.5rem;
}

.footer-main {
    background-color: var(--color-primary-muted);
    color: var(--color-white);
    padding: 8.75rem 0 3rem;
}

.footer-main a {
    color: var(--color-primary-200);
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-medium);
}

.footer-main a:hover {
    color: var(--color-white);
}

.footer-about > p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--color-white);
    font-size: var(--font-body-sm);
    font-weight: var(--font-weight-medium);
}

.footer-contact-list > li {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: 6rem;
}

.footer-contact-list > li > div {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-semibold);
}

.footer-links-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.newsletter {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.newsletter-input {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-gray-300);
    display: flex;
    flex: 1 1 0%;
}

.footer-social-links {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.footer-social-links a {
    background-color: var(--color-white);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-copyrights {
    background-color: var(--color-primary-muted-1000);
    color: var(--color-white);
    padding: 0.625rem 0;
    font-size: var(--font-body-xs-plus);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-body-xs-plus);
    text-align: center;
}

/* ===== ABOUT US ===== */
.hero-with-bg-image {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
}

.hero-overlay::before {
    content: '';
    background-color: rgba(16, 37, 85, 0.9);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Breadcrumb */
.breadcrumb {
    font-size: var(--font-body-sm);
    margin: 1rem 0;
}

.breadcrumb ol {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    color: var(--color-gray-800);
}

.breadcrumb li a {
    color: var(--color-primary-500);
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumb li + li::before {
    content: ">";
    margin: 0 10px;
    color: var(--color-gray-800);
    font-size: var(--font-body-sm);
}

.breadcrumb li.active {
    color: var(--color-gray-900);
    font-weight: var(--font-weight-medium);
    pointer-events: none;
}

/* Breadcrumb Light */
.breadcrumb.light li,
.breadcrumb.light li + li::before,
.breadcrumb.light li.active {
    color: var(--color-white);
}

.breadcrumb.light li a {
    color: var(--color-accent-300);
}

.about-company-video {
    width: 100%;
    max-height: 675px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    position: relative;
    overflow: hidden;
    border-radius: 3rem 0;
}

.about-company-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.values-card {
    flex-direction: column;
    text-align: center;
}

.values-card .pointer-card__icon {
    margin: 0 auto;
}

.timeline-section {
    background-color: var(--color-primary-800);
    position: relative;
}

.timeline-section::before {
    background-color: var(--color-accent-300);
    content: '';
    display: block;
    width: 0.25rem;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-section .container {
    position: relative;
    z-index: 2;
}

.timeline-section .section-heading {
    background-color: var(--color-primary-800);
    padding: 0.75rem 0;
}

.timeline-thumb {
    border-radius: 1rem;
}

.timeline-year {
    background-color: var(--color-primary-800);
    padding: 0.75rem 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.timeline-year .year {
    font-size: 3rem;
    font-weight: var(--font-weight-semibold);
    line-height: 100%;
    color: var(--color-accent-300);
}

.timeline-year > div:last-child {
    content: '';
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-accent-300);
}

.timeline-copy {
    background-color: var(--color-primary-800);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem 0;
}

.timeline-heading {
    font-size: var(--font-h6);
    line-height: var(--line-h6);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-300);
}

.timeline-desc {
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
}

.timeline-item.last {
    text-align: center;
    padding: 5rem 0;
} 

.timeline-quote {
    background-color: var(--color-primary-800);
    color: var(--color-accent-300);
    font-family: var(--font-heading);
    font-size: var(--font-h5);
    line-height: var(--line-h5);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    padding: 0.75rem 0;
    position: relative;
}

.timeline-quote-icon {
    position: absolute;
    top: 0;
}

.timeline-quote-icon.start {
    left: -3rem;
}

.timeline-quote-icon.end {
    right: -3rem;
    transform: rotate(180deg);
}

.team-member-card {
    background: var(--faq-grad-bg);
    border: 1px solid var(--color-gray-300);
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.3s ease-in-out;
}

.team-member-card__img {
    margin: 0 auto;
    transition: all 0.3s ease-in-out;
}

.team-member-card__img > img {
    width: 150px;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

.team-member-card__copy {
    text-align: center;
}

.team-member-card__copy .member-post {
    color: var(--color-gray-500);
    font-size: var(--font-body-xs-plus);
    line-height: var(--line-body-xs-plus);
    font-weight: var(--font-weight-medium);
    margin-top: 0.125rem;
    transition: all 0.3s ease-in-out;
}

.team-member-card__copy .member-employer {
    color: var(--color-gray-900);
    font-size: var(--font-body-xs-plus);
    line-height: var(--line-body-xs-plus);
    font-weight: var(--font-weight-medium);
    margin-top: 0.5rem;
    transition: all 0.3s ease-in-out;
}

.team-member-card__copy .member-contact {
    position: relative;
    width: auto;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.team-member-card__copy .member-contact a {
    color: var(--color-primary-500);
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    font-weight: var(--font-weight-semibold);
}

.team-member-card__copy .member-contact::before {
    content: "";
    width: 18px;
    height: 18px;
    background: url('../images/icons/call-filled-primary-16x16.svg') no-repeat 0 0;
    display: flex;
    align-items: center;
    justify-content: c;
}

.team-member-card:hover {
    background: var(--color-primary-800);
}

.team-member-card:hover .member-post,
.team-member-card:hover .member-employer {
    color: var(--color-white);
}

.team-member-card:hover .card-common_heading {
    color: var(--color-primary-300);
}

.team-member-card:hover .team-member-card__copy .member-contact a {
    color: var(--color-accent-300);
}

.team-member-card:hover .team-member-card__img > img {
    filter: grayscale(100%);
}

.team-member-card:hover .team-member-card__copy .member-contact::before {
    background: url('../images/icons/call-filled-white-16x16.svg') no-repeat 0 0;
}

.fomo-quote {
    color: var(--color-primary-muted);
    font-family: var(--font-heading);
    font-size: var(--font-h5);
    line-height: var(--line-h5);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.fomo-quote-icon {
    margin: 0 auto 0.5rem;
}

/* ===== PHOTO GALLERY ===== */
.page-icon {
    width: 96px;
    height: 96px;
    background-color: var(--color-white);
    /* border: 1px solid var(--color-gray-300); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
}

.gallery-thumb {
    position: relative;
}

.gallery-thumb > img {
    border-radius: 0.5rem;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.gallery-thumb > img:hover {
    filter: grayscale(100%);
}

.gallery-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.6);
    border-radius: 0.5rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;

    background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff'%3E%3Cpath d='M19.5 9c-.492-.004-.916.242-1.092.47l-2.737 3.457c-.17.208-.55.073-.727-.03l-2.455-1.547c-.29-.19-.62-.35-.988-.35-.38 0-.786.114-1.072.434l-3.293 3.724c-.445.498.3 1.166.746.668l3.294-3.724c.218-.234.535-.05.765.084l2.46 1.552.012.006c.306.19.65.252.988.256.34.004.71-.027.985-.36l2.767-3.5c.217-.263.534-.14.744.04l2.254 1.688c.527.477 1.205-.375.62-.78l-2.252-1.69C20.252 9.188 19.913 9 19.5 9zm-12 8h15c.277 0 .5.223.5.5s-.223.5-.5.5h-15c-.277 0-.5-.223-.5-.5s.223-.5.5-.5zM11 5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 1c.558 0 1 .442 1 1s-.442 1-1 1-1-.442-1-1 .442-1 1-1zm14 19.5a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5.5.5 0 0 1 .5.5zm-19 0a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5.5.5 0 0 1 .5.5zm9-1.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 1c.563 0 1 .437 1 1s-.437 1-1 1-1-.437-1-1 .437-1 1-1zM26.5 3c-.665 0-.648 1 0 1h2c.286 0 .5.214.5.5v14c0 .286-.214.5-.5.5h-2c-.654 0-.66 1 0 1h2c.822 0 1.5-.678 1.5-1.5v-14c0-.822-.678-1.5-1.5-1.5zm-25 0C.678 3 0 3.678 0 4.5v14c0 .822.678 1.5 1.5 1.5h2c.66 0 .665-1 0-1h-2c-.286 0-.5-.214-.5-.5v-14c0-.286.214-.5.5-.5h2c.66 0 .66-1 0-1zm5-1C5.678 2 5 2.678 5 3.5v16c0 .822.678 1.5 1.5 1.5h17c.822 0 1.5-.678 1.5-1.5v-16c0-.822-.678-1.5-1.5-1.5zm0 1h17c.286 0 .5.214.5.5v16c0 .286-.214.5-.5.5h-17c-.286 0-.5-.214-.5-.5v-16c0-.286.214-.5.5-.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12%;
}

.gallery-thumb:hover::after {
    opacity: 1;
    visibility: visible;
}

.open-gallery > h2,
.commercial-video-thumb > h2 {
    font-size: var(--font-body-base-plus);
    line-height: var(--line-body-base-plus);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-top: 1rem;
}


/* ===== COMMERCIALS ===== */
.commercial-video-thumb img {
    cursor: pointer;
}

.commercial-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.commercial-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===== OUR PRODUCTS ===== */
.op-card {
    position: relative;
}

.op-thumb {
    border-radius: 0.5rem;
    position: relative;
}

.op-thumb > img {
    border-radius: 0.5rem;
    transition: all 0.3s ease-in-out;
}

.op-thumb-title {
    padding: 1rem;
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    transition: all 0.3s ease-in-out;
}

.op-thumb-btn {
    width: 64px;
    height: 64px;
    display: block;
    background: var(--color-white);
    text-align: center;
    border-radius: 1rem 0 0 0;
    transition: all 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #fff;
}

.op-thumb-btn svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    transform: translate(-50%, -50%) rotate(-35deg);
}

.op-thumb-btn svg path {
    transition: all 0.3s ease-in-out;
}

.op-card:hover .op-thumb > img {
    filter: grayscale(100%);
}

.op-card:hover .op-thumb-title {
    color: var(--color-primary-500);
}

.op-card:hover .op-thumb-btn {
     background-color: var(--color-black);
}

.op-card:hover .op-thumb-btn svg path {
    fill: var(--color-white);
}


/* ===== PRRODUCT ===== */
.product-hero-bg {
    background-image: url('../images/product-hero-bg.webp');
}

.product-quote {
    margin-top: -7rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.product-slider {
    position: relative;
}

.product-slider > img {
    border-radius: 1.5rem;
}

/* .product-slider .owl-item img {
    border-radius: 1.5rem;
} */

.product-slider .carousel-nav {
    border-radius: 1.5rem;
}

.product-main-info {
    padding: 2rem;
    padding-bottom: 0;
}

.product-main-info .title {
    font-size: var(--font-h4);
    line-height: var(--line-h4);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
}

.product-main-info .desc {
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-medium);
    padding-bottom: 1rem;
}

/* .product-main-info .features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-main-info .features > li {
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.product-main-info .features > li::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url('../images/icons/shield-check-colored-14x14.svg') no-repeat center / contain;
    background-size: 20px;
} */

.product-main-info .features {
    display: block;
    padding-left: 0;
    margin: 0;
}

.product-main-info .features > li {
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    list-style: none;
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.product-main-info .features > li:last-child {
    margin-bottom: 0;
}

.product-main-info .features > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: url('../images/icons/shield-check-colored-14x14.svg') no-repeat center;
    background-size: contain;
}

.product-quote-form-wrap {
    background: var(--faq-grad-bg);
    border-radius: 1.5rem;
    border-top: 0.625rem solid var(--color-accent-400);
    padding: 1rem 2.25rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.product-quote-form-heading {
    font-size: var(--font-h5);
    line-height: var(--line-h5);
    font-weight: var(--font-weight-bold);
    margin-bottom: 2rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-label {
    font-size: var(--font-body-base);
    line-height: var(--font-body-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    transition: all 0.2s ease-in-out;
}

.input-label > span {
    color: var(--color-error-500);
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    transition: all 0.2s ease-in-out;
}

.textarea-icon {
    top: 1rem;
    transform: none;
}

.input-field {
    width: 100%;
    border: none;
    outline: none;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-900);
    transition: all 0.2s ease-in-out;
}

.product-quote-form .input-field {
    padding-left: 2.5rem;
}

.input-field::placeholder {
    color: var(--color-gray-500);
}

.input-field:focus {
    border-color: var(--color-info-500);
    box-shadow: 0 0 0 2px #bfdbfe;
    outline: none;
}

.input-field:focus + .input-icon,
.input-wrapper:focus-within .input-icon,
.input-group:focus-within .input-label {
    color: var(--color-info-500);
}

.radio-wrapper {
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.radio-wrapper > label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
}

.radio-wrapper label > input[type="radio"] {
    width: 1rem;
    height: 1rem;
}

.radio-wrapper label > span {
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-900);
}

.checkbox-wrapper {
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.checkbox-wrapper > label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
}

.checkbox-wrapper label > input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}

.checkbox-wrapper label > span {
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-900);
}

.recaptcha-row {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.product-about {
    padding-top: 47rem;
}

/* .product-about-43 {
    padding-top: 43rem;
}

.product-about-44 {
    padding-top: 44rem;
}

.product-about-45 {
    padding-top: 45rem;
}

.product-about-47 {
    padding-top: 47rem;
} */

.product-about .about-company-video {
    max-height: 600px;
}


.disclaimer-box {
    background-color: #fff3cd;
    border-left: 5px solid #ffc107;
    color: #856404;
    padding: 15px 18px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 4px;
}

.disclaimer-box strong {
    display: block;
    margin-bottom: 5px;
}


/* ===== BLOGS ===== */
/* Blogs Home */
.sidebar {
    background-color: var(--color-primary-900);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: sticky;
    top: 96px;
}

.sidebar-widget {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--color-white);
    border-bottom: 1px dashed var(--color-white);
    padding-bottom: 2.25rem;
}

.sidebar-widget:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-widget a {
    color: var(--color-white);
}

.sidebar-widget a:hover,
.sidebar-links-list li.active a {
    color: var(--color-accent-300);
}

.sidebar-widget-heading {
    font-size: var(--font-h6);
    line-height: var(--line-h6);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-300);
}

.sidebar-links-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-links-list li a {
    position: relative;
    display: flex;
    align-items: start;
}

.sidebar-links-list li a::after,
.sidebar-links-list li.active a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    opacity: 0;
    transition: opacity 0.2s ease;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2.5L8 6L4.5 9.5' stroke='%234DC4F0' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sidebar-links-list li a:hover::after,
.sidebar-links-list li.active a::after {
    opacity: 1;
}

.recent-posts-list {
    gap: 1rem;
}

.recent-posts-list > li {
    display: flex;
    gap: 0.75rem;
    align-items: start;
}

.recent-posts-list > li a {
    gap: 0.75rem;
}

.recent-posts-list > li a::after {
    display: none;
}

.rpwwt-copy {
    font-size: var(--font-body-xs);
    line-height: var(--line-body-xs);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rpwwt-thumb {
    max-width: 80px;
    border-radius: 0.25rem;
}

.rpwwt-post-title {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-h6);
    color: var(--color-white);
}

.recent-posts-list > li a:hover .rpwwt-post-title {
    color: var(--color-accent-300);
}

.blogs-hero {
    position: relative;
}

.blog-hero-item-content {
    position: relative;
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 860px;
}

.blog-hero-item-category-chips {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.blog-hero-item-category-chips .blog-category-chip {
    background-color: var(--color-accent-300);
    color: var(--color-primary-900);
    transition: all 0.2s ease-in-out;
}

.blog-hero-item-category-chips .blog-category-chip:hover {
    background-color: var(--color-primary-500);
    color: var(--color-white);
}

.blog-hero-item-title {
    font-size: var(--font-h2);
    line-height: var(--line-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

.blog-hero-item-meta {
    display: flex;
    gap: 1rem;
}

.blog-hero-item-content .blog-thumb-author span,
.blog-hero-item-content .blog-thumb-date span {
    color: var(--color-white);
}

.blog-hero-item-cta .btn {
    border-color: var(--color-white);
    color: var(--color-white);
    margin-top: 1rem;
}

.blog-hero-item-cta .btn:hover {
    background-color: transparent;
    border-color: var(--color-accent-300);
    color: var(--color-accent-300);
}

.blog-item {
    display: none;
}

.loader {
    width: 28px;
    height: 28px;
    border: 3px solid #ddd;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin: 15px auto;
    display: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Blogs Single */
.blogs-heading-level-1 {
    font-size: var(--font-h6);
    line-height: var(--line-h6);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.75rem;
}

.blogs-heading-level-2 {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.5rem;
}

.blogs-single-content p {
    margin-bottom: 1rem;
}

.blogs-list-items {
    margin-bottom: 1rem;
}

.blogs-list-items > li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.blogs-list-items > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(32, 73, 162, 1);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2.5L8 6L4.5 9.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.blogs-list-items.with-check > li::before {
    background-color: #2ecc71;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 -1028.4)'%3E%3Cpath d='m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z' transform='translate(0 1029.4)' fill='%2327ae60'/%3E%3Cpath d='m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z' transform='translate(0 1028.4)' fill='%232ecc71'/%3E%3Cpath d='m16 1036.4-6 6-2.5-2.5-2.125 2.1 2.5 2.5 2 2 0.125 0.1 8.125-8.1-2.125-2.1z' fill='%23ecf0f1'/%3E%3C/g%3E%3C/svg%3E");
}


.blog-quote {
    background-color: var(--color-primary-50);
    border-radius: 0.75rem;
    border: 1px solid var(--color-gray-300);
    padding: 2rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.4;
    font-weight: var(--font-weight-bold);
    font-style: italic;
    text-align: center;
}

/* ===== CIC ===== */
/* CIC List */
.cic-links-list {
    gap: 0.75rem;
}

.cic-links-list > li a {
    font-size: var(--font-body-base);
    border-bottom: 1px dashed var(--color-white);
    padding-right: 1rem;
}

.cic-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 1rem;
    padding: 1rem 1rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.cic-card::before {
    content: '';
    background-color: var(--color-gray-500);
    position: absolute;
    left: -0.5rem;
    top: 1.5rem;
    width: 0.5rem;
    height: 9.375rem;
    border-radius: 0.375rem 0 0 0.375rem;
}

/* for cic */
.cic-card.allianz-global-assistance::before {
    background-color: #003781;
}

.cic-card.beneva::before {
    background-color: #4b009b;
}

.cic-card.bmo::before {
    background-color: #ed1c24;
}

.cic-card.canada-life::before {
    background-color: #ba0c2f;
}

.cic-card.canada-protection-plan::before {
    background-color: #5e2750;
}

.cic-card.desjardins::before {
    background-color: #00874e;
}

.cic-card.equitable-life::before {
    background-color: #00a4ac;
}

.cic-card.foresters::before {
    background-color: #5e2750;
}

.cic-card.gms::before {
    background-color: #15478f;
}

.cic-card.ia-financial::before {
    background-color: #064dd9;
}

.cic-card.intact-insurance::before {
    background-color: #df0030;
}

.cic-card.manulife::before {
    background-color: #00ac5b;
}

.cic-card.rbc::before {
    background-color: #0136a8;
}

.cic-card.sunlife::before {
    background-color: #febe10;
}

.cic-card.the-co-operators::before {
    background-color: #006eb3;
}

.cic-card.travelers-canada::before {
    background-color: #e51c24;
}

.cic-card.wawanesa-insurance::before {
    background-color: #0080c3;
}




/* for calculators */
.cic-card.humania::before {
    background-color: #502a7d;
}

.cic-card.winquote::before {
    background-color: #193552;
}

.cic-card.ci-investments::before {
    background-color: #00447c;
}

.cic-card.ia-investia::before {
    background-color: #003da5;
}

.cic-card.lifeguide::before {
    background-color: #79ab34;
}


/* for softwares */
.cic-card.assumption-life::before {
    background-color: #0055a4;
}

.cic-card.blendable::before {
    background-color: #00c1fa;
}

.cic-card.blue-cross-canada::before {
    background-color: #0099d8;
}

.cic-card.the-edge-benefits::before {
    background-color: #012a60;
}

.cic-card.empire-life::before {
    background-color: #afbd21;
}

.cic-card.ia-excellence::before {
    background-color: #003da6;
}

.cic-card.ivari::before {
    background-color: #a1206a;
}

.cic-card.serenia::before {
    background-color: #9ccb3b;
}

.cic-card.specialitylife::before {
    background-color: #159bbd;
}

.cic-card.uv::before {
    background-color: #05428c;
}

/* for history */
.cic-card.tic::before {
    background-color: #01819c;
}

.cic-card.tugo::before {
    background-color: #36bcab;
}

.cic-card.twentyfirst-century::before {
    background-color: #0b428f;
}






.cic-card.cra::before {
    background-color: #ff0000;
}

.cic-card.turbotax::before {
    background-color: #ff0000;
}

.cic-card.cibc::before {
    background-color: #c41f3e;
}

.cic-card.td::before {
    background-color: #43b02a;
}











.cic-thumb {
    background-color: var(--color-primary-50);
    border-radius: 1rem;
    padding: 2.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.cic-thumb > img {
    width: 200px;
}

.cic-thumb-title {
    font-size: 18px;
    line-height: var(--line-h6);
    font-weight: var(--font-weight-bold);
    transition: all 0.3s ease-in-out;
    margin-bottom: 0.25rem;
}

.cic-thumb-desc {
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-medium);
}

.cic-thumb-plans {
    margin-top: 0.75rem;
}

.cic-plans-head {
    font-size: var(--font-body-base);
    line-height: var(--font-body-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
}

.cic-thumb-plans {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cic-thumb-plans-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.cic-thumb-plans li {
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    color: var(--color-gray-800);
    /* display: flex; */
    /* align-items: flex-start; */
    /* gap: 0.25rem; */
    position: relative;
    padding-left: 1.2rem;
}

.cic-thumb-plans li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background: url('../images/icons/shield-check-colored-14x14.svg') no-repeat center / contain;
}

.see-more-btn {
    color: var(--color-accent-500);
    border-bottom: 1px solid var(--color-accent-500);
    border-radius: 0.375rem;
    padding: 0.25rem 1.25rem 0.25rem 0.25rem;
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-medium);
    position: relative;
}

.see-more-btn::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 138, 211, 1);

    /* SVG chevron centered inside circle */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2.5L8 6L4.5 9.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.see-more-btn:hover,
.cic-card:hover .see-more-btn {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

.see-more-btn:hover::after,
.cic-card:hover .see-more-btn::after {
    background: rgba(32, 73, 162, 1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2.5L8 6L4.5 9.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.cic-card:hover {
    border-color: var(--color-primary-400);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.cic-card:hover .cic-thumb-title {
    color: var(--color-primary-500);
}

/* CIC Detail */
.company-logo-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary-50);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: -15rem;
}

.company-logo-top > img {
    width: 150px;
}

.cic-detail-content {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 1rem;
    padding: 2.25rem;
}

.cic-detail-content p {
    margin-bottom: 1rem;
}

.cic-detail-main-heading {
    font-size: var(--font-h4);
    line-height: var(--line-h4);
    font-weight: bold;
}

.cic-cta {
    background-color: var(--color-primary-50);
    border: 1px solid var(--color-primary-300);
    border-radius: 0.75rem;
    padding: 2.25rem;
    margin: 1.5rem 0;
}

.cic-cta:last-child {
    margin-bottom: 0;
}

.cic-cta-copy {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: start;
}

.cic-cta-copy .title {
    font-family: var(--font-heading);
    font-size: var(--font-h4);
    line-height: var(--line-h4);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
}

.cic-cta-copy .desc {
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
    font-weight: var(--font-weight-medium);
}

.cic-cta-copy .desc a {
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-500);
    text-decoration: underline;
}

/* ===== Careers ===== */
.join-us-badge {
    position: absolute;
    left: 50%;
    bottom: -87px;
    transform: translateX(-50%);
}

.explore-jobs-section {
    background: linear-gradient(
        180deg,
        var(--color-primary-500) 0%,
        var(--color-primary-800) 100%
    );
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.job-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    color: var(--color-white);
}

.job-title {
    font-size: var(--font-h6);
    line-height: var(--line-h6);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.job-location {
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-accent-200);
}

.job-apply-btn {
    border: 1px solid var(--color-white);
    color: var(--color-white);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: var(--font-body-xs-plus);
    line-height: var(--font-body-xs-plus);
    font-weight: var(--font-weight-medium);
    transition: all 0.3s ease-in-out;
}

.job-apply-btn:hover {
    background-color: var(--color-white);
    color: var(--color-gray-900);
}

/* ===== Google Reviews ===== */
.g-rating-hero {
    background-color: var(--color-white);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.g-rating-hero-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.g-rating-hero-left .logo-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.g-rating-hero-left .logo-text > span {
    font-size: 24px;
    line-height: var(--font-body-base-plus);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
}

.g-rating-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.g-rating-rating .rating-number {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

.g-rating-rating .rating-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.g-rating-rating .rating-list img {
    width: 24px;
}

.g-rating-rating .based-on {
    font-size: var(--font-body-xs-plus);
    line-height: var(--font-body-xs-plus);
}

.g-rating-rating .based-on > b {
    color: var(--color-gray-900);
}

/* ===== Contact Us ===== */
.location-card-head-office {
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%,rgba(204, 204, 204, 1) 100% );
    border-radius: 1.5rem;
    border: 1px solid var(--color-gray-300);
    padding: 4rem 1.5rem 1.5rem 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.office-building-icon {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 50%;
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -2.25rem;
    left: 50%;
    transform: translateX(-50%);
}

.ho-title-chip {
    background-color: var(--color-gray-900);
    border-radius: 100px;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-body-xs);
    line-height: var(--font-body-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin: 0 auto;
}

.ho-company {
    font-size: var(--font-h6);
    line-height: var(--line-h6);
    font-weight: var(--font-weight-bold);
    margin: 0.75rem 0;
    text-align: center;
}

.ho-contact {
    display: flex;
    flex-direction: column;
    gap: 1.088rem;
    margin-top: 0.75rem;
}

.ho-contact > div {
    display: flex;
    gap: 0.5rem;
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-bold);
}

.ho-contact > div a {
    color: var(--color-primary-500);
}

.location-card {
    position: relative;
    border-radius: 1.5rem;
    display: block;
}

.location-card > img {
    border-radius: 1.5rem;
    width: 100%;
}

.location-card-copy {
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 1) 100% );
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 1.5rem;
    color: var(--color-white);
    padding: 1.5rem;
    transition: all 0.3s ease-in-out
}

.location-card-content {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.office-location {
    font-size: var(--font-h6);
    line-height: var(--line-h6);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.office-address {
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm)
}

.office-contact {
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    font-weight: var(--font-weight-semibold);
    margin-top: 0.25rem;
}

.office-contact a:hover {
    color: var(--color-accent-300);
}

.location-card .location-card-content .btn {
    display: flex;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: 12px;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    display: none;
}

.location-card:hover .location-card-copy {
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,rgba(32, 73, 162, 1) 100% );
    padding-bottom: 2.5rem;
}

.location-card:hover .location-card-content .btn {
    display: block;
}

/* ===== Giveaway ===== */
.giveaway-hero {
    background: url('../images/giveaway-hero-bg.webp') no-repeat top center;
    background-size: cover;
    position: relative;
    padding-top: 3rem;
}

.giveaway-hero-heading {
    font-size: var(--font-h2);
    line-height: var(--line-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

.giveaway-hero-heading > div {
    font-size: var(--font-h1);
    line-height: var(--line-h1);
    margin: 0.5rem 0;
}

.giveaway-gradient-text {
    background: linear-gradient(90deg, #c32c55 0%, #fdc114 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.giveaway-children-img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 600px;
    max-width: 100%;
}

.giveaway-contact-form {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 1.5rem 1.5rem 0 0;
    border-top: 0.625rem solid var(--color-accent-400);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    width: 100%;
}

.giveaway-contact-form label,
.giveaway-contact-form .input-field {
    font-size: var(--font-body-sm);
}

.giveaway-contact-form .input-icon svg {
    width: 14px;
}

.giveaway-contest-badge {
    position: absolute;
    left: 50%;
    bottom: -100px;
    transform: translateX(-50%);
}

.winner-card .card-common_heading {
    font-size: 18px;
}

.winner-card .team-member-card__img > img {
    border-radius: 0;
    width: auto;
}

.winner-card .member-post {
    color: var(--color-gray-700);
    font-size: var(--font-body-sm);
    line-height: var(--line-body-sm);
    text-transform: uppercase;
}

.winner-card .member-employer {
    color: var(--color-success-700);
    font-size: var(--font-body-base);
    line-height: var(--line-body-base);
}


/* ===========================
   Responsive Breakpoints
=========================== */
@media (max-width: 1535px) {
}

@media (max-width: 1279px) {
    .hero-heading,
    .blog-hero-item-title {
        font-size: var(--font-h3);
    }

    .hp-about-left {
        flex-direction: column;
        padding-bottom: 0;
        gap: 0;
    }

    /* .hp-about-img1 {
        width: 100%;
    } */

    /* .hp-about-img1 > img {
        border-radius: 1.25rem;
    } */

    .hp-about-img1,
    .hp-about-img2,
    .hp-about-dots-grid {
        display: none;
    }

    .hp-about-experience {
        border-radius: 1.25rem;
        width: 100%;
        box-shadow: none;
        margin-top: 0;
    }
}

@media (max-width: 1023px) {
    .header-logo {
        max-width: 7rem;
    }

    .navlist-wrap {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 340px;
        height: 100vh;
        background: var(--color-white);
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        z-index: 9999;
        transition: left 0.3s ease;
        padding: 1rem 1.5rem;
        overflow-y: auto;
    }

    .navlist-wrap.active {
        left: 0;
    }

    .navlist-wrap-header-mbl {
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2rem;
    }

    .navlist-close {
        font-size: 1.5rem;
        opacity: 0.8;
        width: 1.75rem !important;
        height: 1.75rem !important;
        background: var(--color-gray-200);
        border-radius: 50%;
        text-align: center;
        line-height: 2rem;
    }

    .navlist {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .navlist > li {
        width: 100%;
    }

    .navlist > li > a {
        justify-content: space-between;
        font-size: var(--font-body-base);
    }

    .navlist > li > a svg {
        transform: rotate(-90deg);
    }

    .navlist > li > a.btn {
        justify-content: center;
        color: var(--color-white);
    }

    .mega-menu {
        position: fixed;
        top: 0;
        /* left: -100%; */
        left: 0;
        width: 80%;
        max-width: 340px;
        height: 100vh;
        background: var(--color-white);
        z-index: 10000;
        transition: left 0.3s ease;
        padding: 1rem 1.5rem;
        overflow-y: auto;
        display: none;
        min-width: auto;
        max-height: none;
    }

    /* .mega-menu.active {
        left: 0;
    } */

    .mega-menu > .container {
        padding-left: 0;
        padding-right: 0;
    }

    .meganav-blogs-carousel .blog-card {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        border-radius: 1rem;
    }

    .meganav-blogs-carousel .blog-thumb,
    .meganav-blogs-carousel .blog-thumb-content {
        width: 100%;
    }

    .meganav-blogs-carousel .blog-category-chip {
        font-size: var(--font-body-xs);
    }

    .meganav-blogs-carousel .blog-thumb-title {
        font-size: 15px;
    }

    .home-hero-section {
        background: url('../images/hero-family-mbl.webp') no-repeat top center;
        background-size: cover;
        color: var(--color-white);
        padding: 3rem 0;
    }

    .home-hero-section::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /* background-color: rgba(32, 73, 162, 0.5); */
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(32, 73, 162, 0.7) 30% );
    }

    .hero-heading,
    .hero-desc {
        color: var(--color-white);
    }

    .hero-right {
        margin-top: 2rem;
        justify-content: start;
        gap: 0.5rem;
    }

    .hero-google-rating {
        position: static;
    }
    
    .hero-customers-stats {
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        font-weight: var(--font-weight-semibold);
        margin: 0;
        height: auto;
        width: auto;
        max-width: 9.75rem;
        position: static;
    }

    .hero-customers-stats::before,
    .hero-customers-stats::after {
        display: none;
    } 

    .happy-number {
        display: flex;
        gap: 0.25rem;
        color: var(--color-primary-500);
        font-size: var(--font-body-xs);
        font-weight: var(--font-weight-bold);
        text-align: left;
        margin-bottom: 0;
    }

    .happy-number > span {
        display: block;
        color: var(--color-neutral-900);
        font-size: 0.625rem;
        font-weight: var(--font-weight-semibold);
    }

    .hero-customers-stats .avatar-item {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .hero-right > img,
    .hero-insurance-drop,
    .happy-text,
    .hero-target-icon,
    .hero-rounded-rectangle-bg,
    .hero-triangle-bg {
        display: none;
    }

    .section-heading .title {
        font-size: var(--font-h4);
        line-height: var(--line-h4);
    }

    .section-desc {
        font-size: var(--font-body-sm);
        line-height: var(--line-body-sm);
    }

    .pointer-card__desc {
        font-size: var(--font-body-xs-plus);
    }

    .hp-services-card__readmore {
        display: none;
    }

    .process-card {
        gap: 0;
    }

    .process-card::before {
        display: none;
    }

    .process-card::after {
        width: 3px;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

    .process-card .pointer-card__icon {
        border-radius: 1rem 1rem 0 0 !important;
    }

    .process-card .pointer-card__copy {
        background-color: var(--color-white);
        border-radius: 1rem;
        padding: 1rem;
        position: relative;
        z-index: 1;
    }

    .footer-cta-heading {
        padding-right: 0;
    }

    .about-hero .hero-cta-buttons > .btn:last-child {
        display: flex;
    }

    .about-company-video {
        border-radius: 0;
        aspect-ratio: 16 / 9;
    }

    .team-member-card__img > img {
        width: 120px;
    }

    .product-quote {
        position: static;
        transform: none;
        margin: 4rem 0;
    }

    .product-main-info {
        padding: 1.25rem 0 0;
    }

    .product-quote-form-wrap {
        display: none;
    }

    .product-quote-form-heading {
        font-size: var(--font-h6);
        line-height: var(--line-h6);
        margin-bottom: 1rem;
    }

    .input-label {
        font-size: var(--font-body-sm);
        line-height: var(--font-body-sm);
    }

    .input-field {
        padding: 0.5rem 1rem;
        font-size: var(--font-body-sm);
        line-height: var(--line-body-sm);
    }

    .product-about {
        padding-top: 3rem;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        border-radius: 0;
        max-width: 340px;
        height: 100vh;
        z-index: 9999;
        padding: 1rem 1.5rem;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        transition: left 0.3s ease;
    }

    .sidebar.active {
        left: 0;
    }

    .blog-sidebar-toggle {
        background: var(--color-primary-900);
        font-size: 1rem;
        color: var(--color-white);
        padding: 0.5rem 0.8rem;
        border-radius: 0.375rem;
        position: fixed;
        left: 1.25rem;
        bottom: 1.25rem;
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 18px rgba(37,211,102,0.28);
        z-index: 998;
        text-decoration: none;
        transition: transform .18s ease, box-shadow .18s ease;
    }

    /* Slide-down hide effect */
    #sidebarToggle.hide-blogsidebar {
        transform: translateY(160%) !important;
    }

    .cic-detail-content {
        padding: 1rem;
    }

    .cic-detail-main-heading {
        font-size: var(--font-h5);
        line-height: var(--line-h5);
    }

    .cic-cta {
        padding: 1rem;
    }

    .giveaway-hero-heading {
        font-size: var(--font-h4);
        line-height: var(--line-h4);
    }

    .giveaway-hero-heading > div {
        font-size: var(--font-h2);
        line-height: var(--line-h2);
        margin: 0;
    }

    .giveaway-contest-badge img {
        width: 120px;
    }
}

@media (max-width: 767px) {
    #searchHeader {
        position: static;
    }

    #searchBoxWrap {
        background-color: var(--color-white);
        top: 32px;
        right: 2px;
        transform: none;
        transition: none;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 
              0 1px 2px 0 rgba(0, 0, 0, 0.06);
        z-index: 9999;
    }

    #searchBox {
        background-color: var(--color-white);
        border: 1px solid var(--color-gray-300);
        height: 3rem;
        padding: 0;
        color: var(--color-gray-900);
    }

    #searchBoxWrap.active {
        width: 100%;
        padding: 0.5rem 1rem;
    }

    .partners-logo-grid img {
        width: 45%;
    }

    .footer-cta {
        background: var(--grad-grey-bg);
        background-color: var(--color-white);
        padding: 0;
        top: 0;
    }
    
    .footer-cta-inner {
        background: transparent;
        border-radius: 0;
        padding: 3rem 1rem;
        border: none;
        position: relative;
        z-index: 1;
    }

    .footer-cta-image {
        z-index: 0;
        opacity: 0.15;
        max-height: 100%;
    }

    .footer-main {
        padding: 3rem 0;
    }

    .timeline-item {
        margin-bottom: 2rem;
    }

    .timeline-item:last-child {
        margin-bottom: 0;
    }

    .timeline-thumb {
        margin: 0 auto;
    }

    .timeline-copy {
        text-align: center;
    }

    .timeline-quote {
        padding: 3rem 0 0.75rem;
        font-size: var(--font-h6);
        line-height: var(--line-h6);
    }

    .timeline-quote-icon.start {
        width: 36px;
        position: static;
        margin: 0 auto 0.5rem;
    }

    .timeline-quote-icon.end {
        display: none;
    }
    
    .fomo-quote {
        font-size: var(--font-h6);
        line-height: var(--line-h6);
    }

    .fomo-quote-icon {
        width: 36px;
    }

}

@media (max-width: 639px) {
    .pointer-card {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .pointer-card > .pointer-card__icon {
        margin: 0 auto;
    }

    .advantages-card .pointer-card__icon > img {
        width: 96px;
    }

    .hp-calculator-card {
        text-align: left;
    }

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

    .newsletter-input {
        width: 100%;
    }

    .commitement-card {
        text-align: left;
    }

    .commitement-card .pointer-card__icon {
        margin: 0;
    }

    .jobs-list {
        gap: 2rem;
    }

    .job-item {
        flex-direction: column;
        align-items: start;
        gap: 1rem;
    }
}

/* @media(max-width:1023px){
    .mega-menu {
        display: none;
    }
    .mega-menu.active {
        display: block !important;
    }
} */