@font-face {
    font-family: 'GoogleSans-Regular';
    src: url('fonts/GoogleSans-Regular.eot');
    src: url('fonts/GoogleSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/GoogleSans-Regular.woff2') format('woff2'),
        url('fonts/GoogleSans-Regular.woff') format('woff'),
        url('fonts/GoogleSans-Regular.ttf') format('truetype'),
        url('fonts/GoogleSans-Regular.svg#GoogleSans-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GoogleSans-Medium';
    src: url('fonts/GoogleSans-Medium.eot');
    src: url('fonts/GoogleSans-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/GoogleSans-Medium.woff2') format('woff2'),
        url('fonts/GoogleSans-Medium.woff') format('woff'),
        url('fonts/GoogleSans-Medium.ttf') format('truetype'),
        url('fonts/GoogleSans-Medium.svg#GoogleSans-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GoogleSans-SemiBold';
    src: url('fonts/GoogleSans-SemiBold.eot');
    src: url('fonts/GoogleSans-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/GoogleSans-SemiBold.woff2') format('woff2'),
        url('fonts/GoogleSans-SemiBold.woff') format('woff'),
        url('fonts/GoogleSans-SemiBold.ttf') format('truetype'),
        url('fonts/GoogleSans-SemiBold.svg#GoogleSans-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GoogleSans-Bold';
    src: url('fonts/GoogleSans-Bold.eot');
    src: url('fonts/GoogleSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/GoogleSans-Bold.woff2') format('woff2'),
        url('fonts/GoogleSans-Bold.woff') format('woff'),
        url('fonts/GoogleSans-Bold.ttf') format('truetype'),
        url('fonts/GoogleSans-Bold.svg#GoogleSans-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

*{box-sizing: border-box;}
body {
    margin: 0px;
    font-family:var(--Font-Face-Regular);
    color: var(--body-color);
}
img{max-width: 100%;height: auto;}
:root{
    --Font-Face-Regular:'GoogleSans-Regular';
    --Font-Face-Medium:'GoogleSans-Medium';
    --Font-Face-SemiBold:'GoogleSans-SemiBold';
    --Font-Face-Bold:'GoogleSans-Bold';
    --MaterialIcons-Font-Face-Regular:'MaterialIcons-Regular';
    --MaterialIcons-Font-Face-Regular-fill:'MaterialIcons-Regular-fill';
    --MaterialIcons-Wight-Light:300;
    --card-shadow:0 0 10px 0 rgba(0, 0, 0, 0.10);
    --shadow-sm:0 0 10px 0 rgba(0, 0, 0, 0.10);
    --shadow-md:0 0 15px 0 rgba(0, 0, 0, 0.10);
    --shadow-lg:0 0 20px 0 rgba(0, 0, 0, 0.10);
    --font-48:48px;
    --font-36:36px;
    --font-30:30px;
    --font-26:26px;
    --font-28:28px;
    --font-24:24px;
    --font-22:22px;
    --font-20:20px;
    --font-18:18px;
    --font-16:16px;
    --font-15:15px;
    --font-14:14px;
    --font-13:13px;
    --font-12:12px;
    --lh-64:64px;
    --lh-46:46px;
    --lh-42:42px;
    --lh-40:40px;
    --lh-36:36px;
    --lh-34:34px;
    --lh-32:32px;
    --lh-28:28px;
    --lh-26:26px;
    --lh-24:24px;
    --lh-22:22px;
    --lh-20:20px;
    --heading-color:#222;
    --body-color:#333;
    --text-white:#fff;
    --bg-white:#fff;
    --section-spacing:100px 0;
    --border-radius-xs:5px;
    --border-radius-sm:10px;
    --border-radius-md:15px;
    --border-radius-lg:20px;
    --border-radius-xl:24px;
    /* Color Palette */
    --primary-blue-500: #0649ed;
    /* Blue */
    --blue-50: #F0F6FF;
    --blue-100: #DCEBFF;
    --blue-200: #B8D7FF;
    --blue-300: #8DBEFF;
    --blue-400: #5B9DFF;
    --blue-500: #2F7DFF;
    --blue-600: #1263F1;
    --blue-700: #0B4DCC;
    --blue-800: #123FA3;
    --blue-900: #15387F;
    --blue-950: #10285C;
    /* Primary Blue */
    --primary-blue-50: #EBF3FE;
    --primary-blue-100: #DCE7FE;
    --primary-blue-200: #ADCBFD;
    --primary-blue-300: #75ABFC;
    --primary-blue-400: #357EFA;
    --primary-blue-500: #0649ED;
    --primary-blue-600: #0632DA;
    --primary-blue-700: #0A26C1;
    --primary-blue-800: #0E209D;
    --primary-blue-900: #12227A;
    --primary-blue-950: #101749;
    /* Navy */
    --navy-50:  #F2F5FF;
    --navy-100: #E3EAFF;
    --navy-200: #C9D6FF;
    --navy-300: #A7B9FF;
    --navy-400: #7D91F2;
    --navy-500: #5F6FD8;
    --navy-600: #4753B8;
    --navy-700: #353F94;
    --navy-800: #293370;
    --navy-900: #1E2858;
    --navy-950: #101749;
    /* Pomegranate-Red */
    --pomegranate-red-50:  #FFF4EF;
    --pomegranate-red-100: #FFE5D8;
    --pomegranate-red-200: #FFC7B0;
    --pomegranate-red-300: #FFA17F;
    --pomegranate-red-400: #FF7950;
    --pomegranate-red-500: #FA4616;
    --pomegranate-red-600: #E9360B;
    --pomegranate-red-700: #C92A08;
    --pomegranate-red-800: #A1240D;
    --pomegranate-red-900: #7D220F;
    --pomegranate-red-950: #461006;
    /* Red */
    --red-50:  #FEF2F2;
    --red-100: #FEE2E2;
    --red-200: #FECACA;
    --red-300: #FCA5A5;
    --red-400: #F87171;
    --red-500: #EF4444;
    --red-600: #DC2626;
    --red-700: #B91C1C;
    --red-800: #991B1B;
    --red-900: #7F1D1D;
    --red-950: #450A0A;
    /* Green */
    --green-50:  #EFFAF2;
    --green-100: #D8F3DF;
    --green-200: #BCEBC7;
    --green-300: #91DDA2;
    --green-400: #63C87C;
    --green-500: #3EAD5F;
    --green-600: #2E8F4D;
    --green-700: #21713D;
    --green-800: #1A562F;
    --green-900: #123D22;
    --green-950: #092B17;
    /* Sky Blue */
    --sky-blue-50:  #F0F9FF;
    --sky-blue-100: #E0F2FE;
    --sky-blue-200: #BAE6FD;
    --sky-blue-300: #7DD3FC;
    --sky-blue-400: #38BDF8;
    --sky-blue-500: #0EA5E9;
    --sky-blue-600: #0284C7;
    --sky-blue-700: #0369A1;
    --sky-blue-800: #075985;
    --sky-blue-900: #0C4A6E;
    --sky-blue-950: #082F49;
    /* Yellow */
    --yellow-50:  #FFFDEA;
    --yellow-100: #FFF9C2;
    --yellow-200: #FFF28A;
    --yellow-300: #FFE95A;
    --yellow-400: #FFDC2E;
    --yellow-500: #FACC15;
    --yellow-600: #EAB308;
    --yellow-700: #CA8A04;
    --yellow-800: #A16207;
    --yellow-900: #854D0E;
    --yellow-950: #4A2C05;
    /* Banana Yellow */
    --banana-yellow-50:  #FFFCEB;
    --banana-yellow-100: #FFF7C7;
    --banana-yellow-200: #FFEF8A;
    --banana-yellow-300: #FFE45C;
    --banana-yellow-400: #FFD83D;
    --banana-yellow-500: #FBCB2D;
    --banana-yellow-600: #E6B91F;
    --banana-yellow-700: #BE9414;
    --banana-yellow-800: #956F0F;
    --banana-yellow-900: #6F500B;
    --banana-yellow-950: #422F05;
    /* Orange */
    --orange-50:  #FFF7ED;
    --orange-100: #FFEDD5;
    --orange-200: #FED7AA;
    --orange-300: #FDBA74;
    --orange-400: #FB923C;
    --orange-500: #F97316;
    --orange-600: #EA580C;
    --orange-700: #C2410C;
    --orange-800: #9A3412;
    --orange-900: #7C2D12;
    --orange-950: #431407;
    /* Purple */
    --purple-50:  #F4EFFF;
    --purple-100: #E6DAFE;
    --purple-200: #CAB4FA;
    --purple-300: #B08AF7;
    --purple-400: #9563F3;
    --purple-500: #7C3AED;
    --purple-600: #6D2FE5;
    --purple-700: #5F22D6;
    --purple-800: #4C16B0;
    --purple-900: #3B0F86;
    --purple-950: #27085E;
    /* Pink */
    --pink-50:  #FDF2F8;
    --pink-100: #FCE7F3;
    --pink-200: #FBCFE8;
    --pink-300: #F9A8D4;
    --pink-400: #F472B6;
    --pink-500: #EC4899;
    --pink-600: #DB2777;
    --pink-700: #BE185D;
    --pink-800: #9D174D;
    --pink-900: #831843;
    --pink-950: #500724;
    /* Rose */
    --rose-50:  #FFF5FA;
    --rose-100: #FFE7F2;
    --rose-200: #FFCFE5;
    --rose-300: #FFA8CF;
    --rose-400: #FF73AE;
    --rose-500: #F5428C;
    --rose-600: #D92772;
    --rose-700: #B7195B;
    --rose-800: #92184B;
    --rose-900: #76183F;
    --rose-950: #45071F;
    /* Slate */
    --slate-50:  #F8FAFC;
    --slate-100: #F2F6FA;
    --slate-200: #E5ECF3;
    --slate-300: #D1DCE8;
    --slate-400: #9AAABC;
    --slate-500: #6B7C91;
    --slate-600: #4E5F73;
    --slate-700: #35465A;
    --slate-800: #213043;
    --slate-900: #111C2C;
    --slate-950: #08111F;
    /* Gray */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* Amber */
    --amber-50:  #FFFBEB;
    --amber-100: #FEF3C7;
    --amber-200: #FDE68A;
    --amber-300: #FCD34D;
    --amber-400: #FBBF24;
    --amber-500: #F59E0B;
    --amber-600: #D97706;
    --amber-700: #B45309;
    --amber-800: #92400E;
    --amber-900: #78350F;
    --amber-950: #451A03;
}
.lucide{transition: all 0.4s ease;}
.lucide.font-12{width: 12px;height: 12px;}
.lucide.font-14{width: 14px;height: 14px;}
.lucide.font-16{width: 16px;height: 14px;}
.lucide.font-18{width: 18px;height: 18px;}
.lucide.font-20{width: 20px;height: 20px;}
.lucide.font-22{width: 22px;height: 22px;}
.lucide.font-24{width: 24px;height: 24px;}
.lucide.font-30{width: 30px;height: 30px;}
.lucide.font-36{width: 36px;height: 36px;stroke-width: 1.5;}
.row {
    --bs-gutter-x: 12px;
    margin-right: calc(-1 * var(--bs-gutter-x));
    margin-left: calc(-1 * var(--bs-gutter-x));
    width: calc(100% + 2 * var(--bs-gutter-x));
}
.row>* {
    padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1);
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}
h1,h2,h3,h4,h5,h6,p{margin: 0;}
/* Firefox ONLY */
@-moz-document url-prefix() {
  .cus-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) var(--bg-Transparent);
  }
}
::-webkit-scrollbar{
    height:7px;
    width: 7px;
    border-radius: var(--border-radius-md);
}
::-webkit-scrollbar-thumb{
    background-color:var(--gray-300);
    border-radius: var(--border-radius-md);
}
::-webkit-scrollbar-track {
    background: var(--bg-Transparent);
    border-radius: var(--border-radius-md);
}
.transform-none{transform: none !important;}
.font-italic{font-style:italic;}
.font-regular{font-family: var(--Font-Face-Regular) !important;}
.font-medium{font-family: var(--Font-Face-Medium) !important;}
.font-semibold{font-family: var(--Font-Face-SemiBold) !important;}
.font-bold, strong{font-family: var(--Font-Face-Bold) !important;}
.shadow{box-shadow: var(--card-shadow) !important;}
.section-spacing{padding:var(--section-spacing);}
.rounded-xs{border-radius: var(--border-radius-xs) !important;}
.rounded-1{border-radius: var(--border-radius-sm) !important;}
.rounded-2{border-radius: var(--border-radius-md) !important;}
.rounded-3{border-radius: var(--border-radius-lg) !important;}
.rounded-4{border-radius: var(--border-radius-xl) !important;}
.material-symbols-outlined {font-family: var(--MaterialIcons-Font-Face-Regular) !important;transition: all 0.4s ease;}
.material-symbols-outlined.fill{font-family: var(--MaterialIcons-Font-Face-Regular-fill) !important;transition: all 0.4s ease;}
.heading-color{color: var(--heading-color) !important;}
.body-color{color: var(--body-color) !important;}
.text-white{color: var(--text-white) !important;}
.w-20{width: 20% !important;}
.p-6{padding: 6px;}
.p-10{padding: 10px;}
.pt-10{padding-top: 10px;}
.pb-10{padding-bottom: 10px;}
.px-10{padding-left: 10px; padding-right: 10px;}
.py-10{padding-top: 10px; padding-bottom: 10px;}
.ps-10{padding-left: 10px;}
.pe-10{padding-right: 10px;}
.m-10{margin: 10px;}
.mt-10{margin-top: 10px;}
.mb-10{margin-bottom: 10px;}
.mx-10{margin-left: 10px; margin-right: 10px;}
.my-10{margin-top: 10px; margin-bottom: 10px;}
.px-12{padding-left: 12px; padding-right: 12px;}
.mt-20{margin-top: 20px;}
.mb-20{margin-bottom: 20px;}
.m-20{margin: 20px;}
.p-20{padding: 20px;}
.pt-20{padding-top: 20px;}
.pb-20{padding-bottom: 20px;}
.px-20{padding-left: 20px; padding-right: 20px;}
.py-20{padding-top: 20px; padding-bottom: 20px;}
.ps-20{padding-left: 20px;}
.pe-20{padding-right: 20px;}
.p-30{padding: 30px;}
.pt-30{padding-top: 30px;}
.pb-30{padding-bottom: 30px;}
.px-30{padding-left: 30px; padding-right: 30px;}
.py-30{padding-top: 30px; padding-bottom: 30px;}
.ps-30{padding-left: 30px;}
.pe-30{padding-right: 30px;}
.m-30{margin: 30px;}
.mt-30{margin-top: 30px;}
.mb-30{margin-bottom: 30px;}
.mx-30{margin-left: 30px; margin-right: 30px;}
.my-30{margin-top: 30px; margin-bottom: 30px;}
.p-40{padding: 40px;}
.pt-40{padding-top: 40px;}
.pb-40{padding-bottom: 40px;}
.px-40{padding-left: 40px; padding-right: 40px;}
.py-40{padding-top: 40px; padding-bottom: 40px;}
.ps-40{padding-left: 40px;}
.pe-40{padding-right: 40px;}
.m-40{margin: 40px;}
.mt-40{margin-top: 40px;}
.mb-40{margin-bottom: 40px;}
.mx-40{margin-left: 40px; margin-right: 40px;}
.my-40{margin-top: 40px; margin-bottom: 40px;}
.p-60{padding: 60px;}
.pt-60{padding-top: 60px;}
.pb-60{padding-bottom: 60px;}
.px-60{padding-left: 60px; padding-right: 60px;}
.py-60{padding-top: 60px; padding-bottom: 60px;}
.ps-60{padding-left: 60px;}
.pe-60{padding-right: 60px;}
.m-60{margin: 60px;}
.mt-60{margin-top: 60px;}
.mb-60{margin-bottom: 60px;}
.mx-60{margin-left: 60px; margin-right: 60px;}
.my-60{margin-top: 60px; margin-bottom: 60px;}
.pt-100{padding-top: 100px !important;}
.pb-100{padding-bottom: 100px !important;}
.mt-100{margin-top: 100px;}
.mb-100{margin-bottom: 100px;}
.bg-heading{background-color:var(--heading-color) !important;}
.text-heading{color:var(--heading-color) !important;}
.bg-body{background-color:var(--body-color) !important;}
.text-body-color{color:var(--body-color) !important;}
.text-white{color:var(--text-white) !important;}
.bg-white{background-color:var(--bg-white) !important;}
/* Blue */
.text-blue-50{color: var(--blue-50) !important;}
.text-blue-100{color: var(--blue-100) !important;}
.text-blue-200{color: var(--blue-200) !important;}
.text-blue-300{color: var(--blue-300) !important;}
.text-blue-400{color: var(--blue-400) !important;}
.text-blue-500{color: var(--blue-500) !important;}
.text-blue-600{color: var(--blue-600) !important;}
.text-blue-700{color: var(--blue-700) !important;}
.text-blue-800{color: var(--blue-800) !important;}
.text-blue-900{color: var(--blue-900) !important;}
.text-blue-950{color: var(--blue-950) !important;}
.bg-blue-50{background-color: var(--blue-50) !important;}
.bg-blue-100{background-color: var(--blue-100) !important;}
.bg-blue-200{background-color: var(--blue-200) !important;}
.bg-blue-300{background-color: var(--blue-300) !important;}
.bg-blue-400{background-color: var(--blue-400) !important;}
.bg-blue-500{background-color: var(--blue-500) !important;}
.bg-blue-600{background-color: var(--blue-600) !important;}
.bg-blue-700{background-color: var(--blue-700) !important;}
.bg-blue-800{background-color: var(--blue-800) !important;}
.bg-blue-900{background-color: var(--blue-900) !important;}
.bg-blue-950{background-color: var(--blue-950) !important;}
.border-blue-100{border-color: var(--blue-100) !important;}
.border-blue-200{border-color: var(--blue-200) !important;}
.border-blue-300{border-color: var(--blue-300) !important;}
.border-blue-400{border-color: var(--blue-400) !important;}
.border-blue-500{border-color: var(--blue-500) !important;}
.border-blue-600{border-color: var(--blue-600) !important;}
.border-blue-700{border-color: var(--blue-700) !important;}
.border-blue-800{border-color: var(--blue-800) !important;}
.border-blue-900{border-color: var(--blue-900) !important;}
.border-blue-950{border-color: var(--blue-950) !important;}
/* Primary-Blue */
.text-primary-blue-50{color: var(--primary-blue-50) !important;}
.text-primary-blue-100{color: var(--primary-blue-100) !important;}
.text-primary-blue-200{color: var(--primary-blue-200) !important;}
.text-primary-blue-300{color: var(--primary-blue-300) !important;}
.text-primary-blue-400{color: var(--primary-blue-400) !important;}
.text-primary-blue-500{color: var(--primary-blue-500) !important;}
.text-primary-blue-600{color: var(--primary-blue-600) !important;}
.text-primary-blue-700{color: var(--primary-blue-700) !important;}
.text-primary-blue-800{color: var(--primary-blue-800) !important;}
.text-primary-blue-900{color: var(--primary-blue-900) !important;}
.text-primary-blue-950{color: var(--primary-blue-950) !important;}
.bg-primary-blue-50{background-color: var(--primary-blue-50) !important;}
.bg-primary-blue-100{background-color: var(--primary-blue-100) !important;}
.bg-primary-blue-200{background-color: var(--primary-blue-200) !important;}
.bg-primary-blue-300{background-color: var(--primary-blue-300) !important;}
.bg-primary-blue-400{background-color: var(--primary-blue-400) !important;}
.bg-primary-blue-500{background-color: var(--primary-blue-500) !important;}
.bg-primary-blue-600{background-color: var(--primary-blue-600) !important;}
.bg-primary-blue-700{background-color: var(--primary-blue-700) !important;}
.bg-primary-blue-800{background-color: var(--primary-blue-800) !important;}
.bg-primary-blue-900{background-color: var(--primary-blue-900) !important;}
.bg-primary-blue-950{background-color: var(--primary-blue-950) !important;}
.border-primary-blue-50{border-color: var(--primary-blue-50) !important;}
.border-primary-blue-100{border-color: var(--primary-blue-100) !important;}
.border-primary-blue-200{border-color: var(--primary-blue-200) !important;}
.border-primary-blue-300{border-color: var(--primary-blue-300) !important;}
.border-primary-blue-400{border-color: var(--primary-blue-400) !important;}
.border-primary-blue-500{border-color: var(--primary-blue-500) !important;}
.border-primary-blue-600{border-color: var(--primary-blue-600) !important;}
.border-primary-blue-700{border-color: var(--primary-blue-700) !important;}
.border-primary-blue-800{border-color: var(--primary-blue-800) !important;}
.border-primary-blue-900{border-color: var(--primary-blue-900) !important;}
.border-primary-blue-950{border-color: var(--primary-blue-950) !important;}
/* Navy */
.text-navy-50  { color: var(--navy-50)  !important; }
.text-navy-100 { color: var(--navy-100) !important; }
.text-navy-200 { color: var(--navy-200) !important; }
.text-navy-300 { color: var(--navy-300) !important; }
.text-navy-400 { color: var(--navy-400) !important; }
.text-navy-500 { color: var(--navy-500) !important; }
.text-navy-600 { color: var(--navy-600) !important; }
.text-navy-700 { color: var(--navy-700) !important; }
.text-navy-800 { color: var(--navy-800) !important; }
.text-navy-900 { color: var(--navy-900) !important; }
.text-navy-950 { color: var(--navy-950) !important; }
.bg-navy-50  { background-color: var(--navy-50)  !important; }
.bg-navy-100 { background-color: var(--navy-100) !important; }
.bg-navy-200 { background-color: var(--navy-200) !important; }
.bg-navy-300 { background-color: var(--navy-300) !important; }
.bg-navy-400 { background-color: var(--navy-400) !important; }
.bg-navy-500 { background-color: var(--navy-500) !important; }
.bg-navy-600 { background-color: var(--navy-600) !important; }
.bg-navy-700 { background-color: var(--navy-700) !important; }
.bg-navy-800 { background-color: var(--navy-800) !important; }
.bg-navy-900 { background-color: var(--navy-900) !important; }
.bg-navy-950 { background-color: var(--navy-950) !important; }
.border-navy-50  { border-color: var(--navy-50)  !important; }
.border-navy-100 { border-color: var(--navy-100) !important; }
.border-navy-200 { border-color: var(--navy-200) !important; }
.border-navy-300 { border-color: var(--navy-300) !important; }
.border-navy-400 { border-color: var(--navy-400) !important; }
.border-navy-500 { border-color: var(--navy-500) !important; }
.border-navy-600 { border-color: var(--navy-600) !important; }
.border-navy-700 { border-color: var(--navy-700) !important; }
.border-navy-800 { border-color: var(--navy-800) !important; }
.border-navy-900 { border-color: var(--navy-900) !important; }
.border-navy-950 { border-color: var(--navy-950) !important; }

/* Pomegranate-Red */
.text-pomegranate-red-50  { color: var(--pomegranate-red-50)  !important; }
.text-pomegranate-red-100 { color: var(--pomegranate-red-100) !important; }
.text-pomegranate-red-200 { color: var(--pomegranate-red-200) !important; }
.text-pomegranate-red-300 { color: var(--pomegranate-red-300) !important; }
.text-pomegranate-red-400 { color: var(--pomegranate-red-400) !important; }
.text-pomegranate-red-500 { color: var(--pomegranate-red-500) !important; }
.text-pomegranate-red-600 { color: var(--pomegranate-red-600) !important; }
.text-pomegranate-red-700 { color: var(--pomegranate-red-700) !important; }
.text-pomegranate-red-800 { color: var(--pomegranate-red-800) !important; }
.text-pomegranate-red-900 { color: var(--pomegranate-red-900) !important; }
.text-pomegranate-red-950 { color: var(--pomegranate-red-950) !important; }
.bg-pomegranate-red-50  { background-color: var(--pomegranate-red-50)  !important; }
.bg-pomegranate-red-100 { background-color: var(--pomegranate-red-100) !important; }
.bg-pomegranate-red-200 { background-color: var(--pomegranate-red-200) !important; }
.bg-pomegranate-red-300 { background-color: var(--pomegranate-red-300) !important; }
.bg-pomegranate-red-400 { background-color: var(--pomegranate-red-400) !important; }
.bg-pomegranate-red-500 { background-color: var(--pomegranate-red-500) !important; }
.bg-pomegranate-red-600 { background-color: var(--pomegranate-red-600) !important; }
.bg-pomegranate-red-700 { background-color: var(--pomegranate-red-700) !important; }
.bg-pomegranate-red-800 { background-color: var(--pomegranate-red-800) !important; }
.bg-pomegranate-red-900 { background-color: var(--pomegranate-red-900) !important; }
.bg-pomegranate-red-950 { background-color: var(--pomegranate-red-950) !important; }
.border-pomegranate-red-50  { border-color: var(--pomegranate-red-50)  !important; }
.border-pomegranate-red-100 { border-color: var(--pomegranate-red-100) !important; }
.border-pomegranate-red-200 { border-color: var(--pomegranate-red-200) !important; }
.border-pomegranate-red-300 { border-color: var(--pomegranate-red-300) !important; }
.border-pomegranate-red-400 { border-color: var(--pomegranate-red-400) !important; }
.border-pomegranate-red-500 { border-color: var(--pomegranate-red-500) !important; }
.border-pomegranate-red-600 { border-color: var(--pomegranate-red-600) !important; }
.border-pomegranate-red-700 { border-color: var(--pomegranate-red-700) !important; }
.border-pomegranate-red-800 { border-color: var(--pomegranate-red-800) !important; }
.border-pomegranate-red-900 { border-color: var(--pomegranate-red-900) !important; }
.border-pomegranate-red-950 { border-color: var(--pomegranate-red-950) !important; }
/* Red*/
.text-red-50  { color: var(--red-50)  !important; }
.text-red-100 { color: var(--red-100) !important; }
.text-red-200 { color: var(--red-200) !important; }
.text-red-300 { color: var(--red-300) !important; }
.text-red-400 { color: var(--red-400) !important; }
.text-red-500 { color: var(--red-500) !important; }
.text-red-600 { color: var(--red-600) !important; }
.text-red-700 { color: var(--red-700) !important; }
.text-red-800 { color: var(--red-800) !important; }
.text-red-900 { color: var(--red-900) !important; }
.text-red-950 { color: var(--red-950) !important; }
.bg-red-50  { background-color: var(--red-50)  !important; }
.bg-red-100 { background-color: var(--red-100) !important; }
.bg-red-200 { background-color: var(--red-200) !important; }
.bg-red-300 { background-color: var(--red-300) !important; }
.bg-red-400 { background-color: var(--red-400) !important; }
.bg-red-500 { background-color: var(--red-500) !important; }
.bg-red-600 { background-color: var(--red-600) !important; }
.bg-red-700 { background-color: var(--red-700) !important; }
.bg-red-800 { background-color: var(--red-800) !important; }
.bg-red-900 { background-color: var(--red-900) !important; }
.bg-red-950 { background-color: var(--red-950) !important; }
.border-red-50  { border-color: var(--red-50)  !important; }
.border-red-100 { border-color: var(--red-100) !important; }
.border-red-200 { border-color: var(--red-200) !important; }
.border-red-300 { border-color: var(--red-300) !important; }
.border-red-400 { border-color: var(--red-400) !important; }
.border-red-500 { border-color: var(--red-500) !important; }
.border-red-600 { border-color: var(--red-600) !important; }
.border-red-700 { border-color: var(--red-700) !important; }
.border-red-800 { border-color: var(--red-800) !important; }
.border-red-900 { border-color: var(--red-900) !important; }
.border-red-950 { border-color: var(--red-950) !important; }

/* Green */
.text-green-50  { color: var(--green-50)  !important; }
.text-green-100 { color: var(--green-100) !important; }
.text-green-200 { color: var(--green-200) !important; }
.text-green-300 { color: var(--green-300) !important; }
.text-green-400 { color: var(--green-400) !important; }
.text-green-500 { color: var(--green-500) !important; }
.text-green-600 { color: var(--green-600) !important; }
.text-green-700 { color: var(--green-700) !important; }
.text-green-800 { color: var(--green-800) !important; }
.text-green-900 { color: var(--green-900) !important; }
.text-green-950 { color: var(--green-950) !important; }
.bg-green-50  { background-color: var(--green-50)  !important; }
.bg-green-100 { background-color: var(--green-100) !important; }
.bg-green-200 { background-color: var(--green-200) !important; }
.bg-green-300 { background-color: var(--green-300) !important; }
.bg-green-400 { background-color: var(--green-400) !important; }
.bg-green-500 { background-color: var(--green-500) !important; }
.bg-green-600 { background-color: var(--green-600) !important; }
.bg-green-700 { background-color: var(--green-700) !important; }
.bg-green-800 { background-color: var(--green-800) !important; }
.bg-green-900 { background-color: var(--green-900) !important; }
.bg-green-950 { background-color: var(--green-950) !important; }
.border-green-50  { border-color: var(--green-50)  !important; }
.border-green-100 { border-color: var(--green-100) !important; }
.border-green-200 { border-color: var(--green-200) !important; }
.border-green-300 { border-color: var(--green-300) !important; }
.border-green-400 { border-color: var(--green-400) !important; }
.border-green-500 { border-color: var(--green-500) !important; }
.border-green-600 { border-color: var(--green-600) !important; }
.border-green-700 { border-color: var(--green-700) !important; }
.border-green-800 { border-color: var(--green-800) !important; }
.border-green-900 { border-color: var(--green-900) !important; }
.border-green-950 { border-color: var(--green-950) !important; }

/* Sky Blue */
.text-sky-blue-50  { color: var(--sky-blue-50)  !important; }
.text-sky-blue-100 { color: var(--sky-blue-100) !important; }
.text-sky-blue-200 { color: var(--sky-blue-200) !important; }
.text-sky-blue-300 { color: var(--sky-blue-300) !important; }
.text-sky-blue-400 { color: var(--sky-blue-400) !important; }
.text-sky-blue-500 { color: var(--sky-blue-500) !important; }
.text-sky-blue-600 { color: var(--sky-blue-600) !important; }
.text-sky-blue-700 { color: var(--sky-blue-700) !important; }
.text-sky-blue-800 { color: var(--sky-blue-800) !important; }
.text-sky-blue-900 { color: var(--sky-blue-900) !important; }
.text-sky-blue-950 { color: var(--sky-blue-950) !important; }
.bg-sky-blue-50  { background-color: var(--sky-blue-50)  !important; }
.bg-sky-blue-100 { background-color: var(--sky-blue-100) !important; }
.bg-sky-blue-200 { background-color: var(--sky-blue-200) !important; }
.bg-sky-blue-300 { background-color: var(--sky-blue-300) !important; }
.bg-sky-blue-400 { background-color: var(--sky-blue-400) !important; }
.bg-sky-blue-500 { background-color: var(--sky-blue-500) !important; }
.bg-sky-blue-600 { background-color: var(--sky-blue-600) !important; }
.bg-sky-blue-700 { background-color: var(--sky-blue-700) !important; }
.bg-sky-blue-800 { background-color: var(--sky-blue-800) !important; }
.bg-sky-blue-900 { background-color: var(--sky-blue-900) !important; }
.bg-sky-blue-950 { background-color: var(--sky-blue-950) !important; }
.border-sky-blue-50  { border-color: var(--sky-blue-50)  !important; }
.border-sky-blue-100 { border-color: var(--sky-blue-100) !important; }
.border-sky-blue-200 { border-color: var(--sky-blue-200) !important; }
.border-sky-blue-300 { border-color: var(--sky-blue-300) !important; }
.border-sky-blue-400 { border-color: var(--sky-blue-400) !important; }
.border-sky-blue-500 { border-color: var(--sky-blue-500) !important; }
.border-sky-blue-600 { border-color: var(--sky-blue-600) !important; }
.border-sky-blue-700 { border-color: var(--sky-blue-700) !important; }
.border-sky-blue-800 { border-color: var(--sky-blue-800) !important; }
.border-sky-blue-900 { border-color: var(--sky-blue-900) !important; }
.border-sky-blue-950 { border-color: var(--sky-blue-950) !important; }

/* Yellow */
.text-yellow-50  { color: var(--yellow-50)  !important; }
.text-yellow-100 { color: var(--yellow-100) !important; }
.text-yellow-200 { color: var(--yellow-200) !important; }
.text-yellow-300 { color: var(--yellow-300) !important; }
.text-yellow-400 { color: var(--yellow-400) !important; }
.text-yellow-500 { color: var(--yellow-500) !important; }
.text-yellow-600 { color: var(--yellow-600) !important; }
.text-yellow-700 { color: var(--yellow-700) !important; }
.text-yellow-800 { color: var(--yellow-800) !important; }
.text-yellow-900 { color: var(--yellow-900) !important; }
.text-yellow-950 { color: var(--yellow-950) !important; }
.bg-yellow-50  { background-color: var(--yellow-50)  !important; }
.bg-yellow-100 { background-color: var(--yellow-100) !important; }
.bg-yellow-200 { background-color: var(--yellow-200) !important; }
.bg-yellow-300 { background-color: var(--yellow-300) !important; }
.bg-yellow-400 { background-color: var(--yellow-400) !important; }
.bg-yellow-500 { background-color: var(--yellow-500) !important; }
.bg-yellow-600 { background-color: var(--yellow-600) !important; }
.bg-yellow-700 { background-color: var(--yellow-700) !important; }
.bg-yellow-800 { background-color: var(--yellow-800) !important; }
.bg-yellow-900 { background-color: var(--yellow-900) !important; }
.bg-yellow-950 { background-color: var(--yellow-950) !important; }
.border-yellow-50  { border-color: var(--yellow-50)  !important; }
.border-yellow-100 { border-color: var(--yellow-100) !important; }
.border-yellow-200 { border-color: var(--yellow-200) !important; }
.border-yellow-300 { border-color: var(--yellow-300) !important; }
.border-yellow-400 { border-color: var(--yellow-400) !important; }
.border-yellow-500 { border-color: var(--yellow-500) !important; }
.border-yellow-600 { border-color: var(--yellow-600) !important; }
.border-yellow-700 { border-color: var(--yellow-700) !important; }
.border-yellow-800 { border-color: var(--yellow-800) !important; }
.border-yellow-900 { border-color: var(--yellow-900) !important; }
.border-yellow-950 { border-color: var(--yellow-950) !important; }
/* Orange */
.text-orange-50  { color: var(--orange-50)  !important; }
.text-orange-100 { color: var(--orange-100) !important; }
.text-orange-200 { color: var(--orange-200) !important; }
.text-orange-300 { color: var(--orange-300) !important; }
.text-orange-400 { color: var(--orange-400) !important; }
.text-orange-500 { color: var(--orange-500) !important; }
.text-orange-600 { color: var(--orange-600) !important; }
.text-orange-700 { color: var(--orange-700) !important; }
.text-orange-800 { color: var(--orange-800) !important; }
.text-orange-900 { color: var(--orange-900) !important; }
.text-orange-950 { color: var(--orange-950) !important; }
.bg-orange-50  { background-color: var(--orange-50)  !important; }
.bg-orange-100 { background-color: var(--orange-100) !important; }
.bg-orange-200 { background-color: var(--orange-200) !important; }
.bg-orange-300 { background-color: var(--orange-300) !important; }
.bg-orange-400 { background-color: var(--orange-400) !important; }
.bg-orange-500 { background-color: var(--orange-500) !important; }
.bg-orange-600 { background-color: var(--orange-600) !important; }
.bg-orange-700 { background-color: var(--orange-700) !important; }
.bg-orange-800 { background-color: var(--orange-800) !important; }
.bg-orange-900 { background-color: var(--orange-900) !important; }
.bg-orange-950 { background-color: var(--orange-950) !important; }
.border-orange-50  { border-color: var(--orange-50)  !important; }
.border-orange-100 { border-color: var(--orange-100) !important; }
.border-orange-200 { border-color: var(--orange-200) !important; }
.border-orange-300 { border-color: var(--orange-300) !important; }
.border-orange-400 { border-color: var(--orange-400) !important; }
.border-orange-500 { border-color: var(--orange-500) !important; }
.border-orange-600 { border-color: var(--orange-600) !important; }
.border-orange-700 { border-color: var(--orange-700) !important; }
.border-orange-800 { border-color: var(--orange-800) !important; }
.border-orange-900 { border-color: var(--orange-900) !important; }
.border-orange-950 { border-color: var(--orange-950) !important; }
/* Purple */
.text-purple-50  { color: var(--purple-50)  !important; }
.text-purple-100 { color: var(--purple-100) !important; }
.text-purple-200 { color: var(--purple-200) !important; }
.text-purple-300 { color: var(--purple-300) !important; }
.text-purple-400 { color: var(--purple-400) !important; }
.text-purple-500 { color: var(--purple-500) !important; }
.text-purple-600 { color: var(--purple-600) !important; }
.text-purple-700 { color: var(--purple-700) !important; }
.text-purple-800 { color: var(--purple-800) !important; }
.text-purple-900 { color: var(--purple-900) !important; }
.text-purple-950 { color: var(--purple-950) !important; }
.bg-purple-50  { background-color: var(--purple-50)  !important; }
.bg-purple-100 { background-color: var(--purple-100) !important; }
.bg-purple-200 { background-color: var(--purple-200) !important; }
.bg-purple-300 { background-color: var(--purple-300) !important; }
.bg-purple-400 { background-color: var(--purple-400) !important; }
.bg-purple-500 { background-color: var(--purple-500) !important; }
.bg-purple-600 { background-color: var(--purple-600) !important; }
.bg-purple-700 { background-color: var(--purple-700) !important; }
.bg-purple-800 { background-color: var(--purple-800) !important; }
.bg-purple-900 { background-color: var(--purple-900) !important; }
.bg-purple-950 { background-color: var(--purple-950) !important; }
.border-purple-50  { border-color: var(--purple-50)  !important; }
.border-purple-100 { border-color: var(--purple-100) !important; }
.border-purple-200 { border-color: var(--purple-200) !important; }
.border-purple-300 { border-color: var(--purple-300) !important; }
.border-purple-400 { border-color: var(--purple-400) !important; }
.border-purple-500 { border-color: var(--purple-500) !important; }
.border-purple-600 { border-color: var(--purple-600) !important; }
.border-purple-700 { border-color: var(--purple-700) !important; }
.border-purple-800 { border-color: var(--purple-800) !important; }
.border-purple-900 { border-color: var(--purple-900) !important; }
.border-purple-950 { border-color: var(--purple-950) !important; }
/* Pink */
.text-pink-50  { color: var(--pink-50)  !important; }
.text-pink-100 { color: var(--pink-100) !important; }
.text-pink-200 { color: var(--pink-200) !important; }
.text-pink-300 { color: var(--pink-300) !important; }
.text-pink-400 { color: var(--pink-400) !important; }
.text-pink-500 { color: var(--pink-500) !important; }
.text-pink-600 { color: var(--pink-600) !important; }
.text-pink-700 { color: var(--pink-700) !important; }
.text-pink-800 { color: var(--pink-800) !important; }
.text-pink-900 { color: var(--pink-900) !important; }
.text-pink-950 { color: var(--pink-950) !important; }
.bg-pink-50  { background-color: var(--pink-50)  !important; }
.bg-pink-100 { background-color: var(--pink-100) !important; }
.bg-pink-200 { background-color: var(--pink-200) !important; }
.bg-pink-300 { background-color: var(--pink-300) !important; }
.bg-pink-400 { background-color: var(--pink-400) !important; }
.bg-pink-500 { background-color: var(--pink-500) !important; }
.bg-pink-600 { background-color: var(--pink-600) !important; }
.bg-pink-700 { background-color: var(--pink-700) !important; }
.bg-pink-800 { background-color: var(--pink-800) !important; }
.bg-pink-900 { background-color: var(--pink-900) !important; }
.bg-pink-950 { background-color: var(--pink-950) !important; }
.border-pink-50  { border-color: var(--pink-50)  !important; }
.border-pink-100 { border-color: var(--pink-100) !important; }
.border-pink-200 { border-color: var(--pink-200) !important; }
.border-pink-300 { border-color: var(--pink-300) !important; }
.border-pink-400 { border-color: var(--pink-400) !important; }
.border-pink-500 { border-color: var(--pink-500) !important; }
.border-pink-600 { border-color: var(--pink-600) !important; }
.border-pink-700 { border-color: var(--pink-700) !important; }
.border-pink-800 { border-color: var(--pink-800) !important; }
.border-pink-900 { border-color: var(--pink-900) !important; }
.border-pink-950 { border-color: var(--pink-950) !important; }
/* Rose */
.text-pink-50  { color: var(--rose-50)  !important; }
.text-rose-100 { color: var(--rose-100) !important; }
.text-rose-200 { color: var(--rose-200) !important; }
.text-rose-300 { color: var(--rose-300) !important; }
.text-rose-400 { color: var(--rose-400) !important; }
.text-rose-500 { color: var(--rose-500) !important; }
.text-rose-600 { color: var(--rose-600) !important; }
.text-rose-700 { color: var(--rose-700) !important; }
.text-rose-800 { color: var(--rose-800) !important; }
.text-rose-900 { color: var(--rose-900) !important; }
.text-rose-950 { color: var(--rose-950) !important; }
.bg-rose-50  { background-color: var(--rose-50)  !important; }
.bg-rose-100 { background-color: var(--rose-100) !important; }
.bg-rose-200 { background-color: var(--rose-200) !important; }
.bg-rose-300 { background-color: var(--rose-300) !important; }
.bg-rose-400 { background-color: var(--rose-400) !important; }
.bg-rose-500 { background-color: var(--rose-500) !important; }
.bg-rose-600 { background-color: var(--rose-600) !important; }
.bg-rose-700 { background-color: var(--rose-700) !important; }
.bg-rose-800 { background-color: var(--rose-800) !important; }
.bg-rose-900 { background-color: var(--rose-900) !important; }
.bg-rose-950 { background-color: var(--rose-950) !important; }
.border-rose-50  { border-color: var(--rose-50)  !important; }
.border-rose-100 { border-color: var(--rose-100) !important; }
.border-rose-200 { border-color: var(--rose-200) !important; }
.border-rose-300 { border-color: var(--rose-300) !important; }
.border-rose-400 { border-color: var(--rose-400) !important; }
.border-rose-500 { border-color: var(--rose-500) !important; }
.border-rose-600 { border-color: var(--rose-600) !important; }
.border-rose-700 { border-color: var(--rose-700) !important; }
.border-rose-800 { border-color: var(--rose-800) !important; }
.border-rose-900 { border-color: var(--rose-900) !important; }
.border-rose-950 { border-color: var(--rose-950) !important; }
/* Slate */
.text-slate-50  { color: var(--slate-50)  !important; }
.text-slate-100 { color: var(--slate-100) !important; }
.text-slate-200 { color: var(--slate-200) !important; }
.text-slate-300 { color: var(--slate-300) !important; }
.text-slate-400 { color: var(--slate-400) !important; }
.text-slate-500 { color: var(--slate-500) !important; }
.text-slate-600 { color: var(--slate-600) !important; }
.text-slate-700 { color: var(--slate-700) !important; }
.text-slate-800 { color: var(--slate-800) !important; }
.text-slate-900 { color: var(--slate-900) !important; }
.text-slate-950 { color: var(--slate-950) !important; }
.bg-slate-50  { background-color: var(--slate-50)  !important; }
.bg-slate-100 { background-color: var(--slate-100) !important; }
.bg-slate-200 { background-color: var(--slate-200) !important; }
.bg-slate-300 { background-color: var(--slate-300) !important; }
.bg-slate-400 { background-color: var(--slate-400) !important; }
.bg-slate-500 { background-color: var(--slate-500) !important; }
.bg-slate-600 { background-color: var(--slate-600) !important; }
.bg-slate-700 { background-color: var(--slate-700) !important; }
.bg-slate-800 { background-color: var(--slate-800) !important; }
.bg-slate-900 { background-color: var(--slate-900) !important; }
.bg-slate-950 { background-color: var(--slate-950) !important; }
.border-slate-50  { border-color: var(--slate-50)  !important; }
.border-slate-100 { border-color: var(--slate-100) !important; }
.border-slate-200 { border-color: var(--slate-200) !important; }
.border-slate-300 { border-color: var(--slate-300) !important; }
.border-slate-400 { border-color: var(--slate-400) !important; }
.border-slate-500 { border-color: var(--slate-500) !important; }
.border-slate-600 { border-color: var(--slate-600) !important; }
.border-slate-700 { border-color: var(--slate-700) !important; }
.border-slate-800 { border-color: var(--slate-800) !important; }
.border-slate-900 { border-color: var(--slate-900) !important; }
.border-slate-950 { border-color: var(--slate-950) !important; }
/* Gray */
.text-gray-50  { color: var(--gray-50)  !important; }
.text-gray-100 { color: var(--gray-100) !important; }
.text-gray-200 { color: var(--gray-200) !important; }
.text-gray-300 { color: var(--gray-300) !important; }
.text-gray-400 { color: var(--gray-400) !important; }
.text-gray-500 { color: var(--gray-500) !important; }
.text-gray-600 { color: var(--gray-600) !important; }
.text-gray-700 { color: var(--gray-700) !important; }
.text-gray-800 { color: var(--gray-800) !important; }
.text-gray-900 { color: var(--gray-900) !important; }
.text-gray-950 { color: var(--gray-950) !important; }
.bg-gray-50  { background-color: var(--gray-50)  !important; }
.bg-gray-100 { background-color: var(--gray-100) !important; }
.bg-gray-200 { background-color: var(--gray-200) !important; }
.bg-gray-300 { background-color: var(--gray-300) !important; }
.bg-gray-400 { background-color: var(--gray-400) !important; }
.bg-gray-500 { background-color: var(--gray-500) !important; }
.bg-gray-600 { background-color: var(--gray-600) !important; }
.bg-gray-700 { background-color: var(--gray-700) !important; }
.bg-gray-800 { background-color: var(--gray-800) !important; }
.bg-gray-900 { background-color: var(--gray-900) !important; }
.bg-gray-950 { background-color: var(--gray-950) !important; }
.border-gray-50  { border-color: var(--gray-50)  !important; }
.border-gray-100 { border-color: var(--gray-100) !important; }
.border-gray-200 { border-color: var(--gray-200) !important; }
.border-gray-300 { border-color: var(--gray-300) !important; }
.border-gray-400 { border-color: var(--gray-400) !important; }
.border-gray-500 { border-color: var(--gray-500) !important; }
.border-gray-600 { border-color: var(--gray-600) !important; }
.border-gray-700 { border-color: var(--gray-700) !important; }
.border-gray-800 { border-color: var(--gray-800) !important; }
.border-gray-900 { border-color: var(--gray-900) !important; }

/* Amber */
.text-amber-50  { color: var(--amber-50)  !important; }
.text-amber-100 { color: var(--amber-100) !important; }
.text-amber-200 { color: var(--amber-200) !important; }
.text-amber-300 { color: var(--amber-300) !important; }
.text-amber-400 { color: var(--amber-400) !important; }
.text-amber-500 { color: var(--amber-500) !important; }
.text-amber-600 { color: var(--amber-600) !important; }
.text-amber-700 { color: var(--amber-700) !important; }
.text-amber-800 { color: var(--amber-800) !important; }
.text-amber-900 { color: var(--amber-900) !important; }
.text-amber-950 { color: var(--amber-950) !important; }
.bg-amber-50  { background-color: var(--amber-50)  !important; }
.bg-amber-100 { background-color: var(--amber-100) !important; }
.bg-amber-200 { background-color: var(--amber-200) !important; }
.bg-amber-300 { background-color: var(--amber-300) !important; }
.bg-amber-400 { background-color: var(--amber-400) !important; }
.bg-amber-500 { background-color: var(--amber-500) !important; }
.bg-amber-600 { background-color: var(--amber-600) !important; }
.bg-amber-700 { background-color: var(--amber-700) !important; }
.bg-amber-800 { background-color: var(--amber-800) !important; }
.bg-amber-900 { background-color: var(--amber-900) !important; }
.bg-amber-950 { background-color: var(--amber-950) !important; }
.border-amber-50  { border-color: var(--amber-50)  !important; }
.border-amber-100 { border-color: var(--amber-100) !important; }
.border-amber-200 { border-color: var(--amber-200) !important; }
.border-amber-300 { border-color: var(--amber-300) !important; }
.border-amber-400 { border-color: var(--amber-400) !important; }
.border-amber-500 { border-color: var(--amber-500) !important; }
.border-amber-600 { border-color: var(--amber-600) !important; }
.border-amber-700 { border-color: var(--amber-700) !important; }
.border-amber-800 { border-color: var(--amber-800) !important; }
.border-amber-900 { border-color: var(--amber-900) !important; }
.border-amber-950 { border-color: var(--amber-950) !important; }

h1, .heading-1{
    font-size: var(--font-48);
    line-height: var(--lh-64);
    font-family: var(--Font-Face-Bold);
    color: var(--heading-color);
}
h2, .heading-2{
    font-size: var(--font-36);
    line-height: var(--lh-46);
    font-family: var(--Font-Face-Bold);
    color: var(--heading-color);
}
h3, .heading-3{
    font-size: var(--font-24);
    line-height: var(--lh-34);
    font-family: var(--Font-Face-Bold);
    color: var(--heading-color);
}
h4, .heading-4{
    font-size: var(--font-20);
    line-height: var(--lh-28);
    font-family: var(--Font-Face-Bold);
    color: var(--heading-color);
}
h5, .heading-5{
    font-size: var(--font-18);
    line-height:var(--lh-26);
    font-family: var(--Font-Face-Bold);
    color: var(--heading-color);
}
h6, .heading-6{
    font-size: var(--font-16);
    line-height: var(--lh-24);
    font-family: var(--Font-Face-Bold);
    color: var(--heading-color);
}
p, .paragraph{
    font-size: var(--font-16);
    font-family: var(--Font-Face-Regular);
    color: var(--body-color);
    line-height: var(--lh-24);
}
.font-48{font-size: var(--font-48) !important;line-height: var(--lh-64);}
.font-36{font-size: var(--font-36) !important;line-height: var(--lh-46);}
.font-30{font-size: var(--font-30) !important;line-height: var(--lh-40);}
.font-28{font-size: var(--font-28) !important;line-height: var(--lh-38);}
.font-26{font-size: var(--font-26) !important;line-height: var(--lh-36);}
.font-24{font-size: var(--font-24) !important;line-height: var(--lh-34);}
.font-22{font-size: var(--font-22) !important;line-height: var(--lh-32);}
.font-20{font-size: var(--font-20) !important;line-height: var(--lh-28);}
.font-18{font-size: var(--font-18) !important;line-height: var(--lh-26);}
.font-16{font-size: var(--font-16) !important;line-height: var(--lh-24);}
.font-15{font-size: var(--font-15) !important;line-height: var(--lh-22);}
.font-14{font-size: var(--font-14) !important;line-height: var(--lh-22);}
.font-13{font-size: var(--font-13) !important;line-height: var(--lh-20);}
.font-12{font-size: var(--font-12) !important;line-height: var(--lh-20);}
.gap-10{gap: 10px !important;}
.gap-14{gap: 14px !important;}
.gap-20{gap: 20px !important;}
.gap-30{gap: 30px !important;}
.row-gap-10{row-gap: 10px !important;}
.row-gap-20{row-gap: 20px !important;}
.row-gap-30{row-gap: 30px !important;}

.material-symbols-outlined.font-18{line-height: 1 !important;}
.material-symbols-outlined.font-20{line-height: 1 !important;}
.material-symbols-outlined.font-22{line-height: 1 !important;}
.purple-gradient{background: linear-gradient(180deg, var(--purple-100) 0%, rgba(237, 233, 254, 0.00) 85%);}
/* START :: Page CSS */
.container{
    max-width: 1248px;
    margin: 0 auto;
}
.normal-icn{
    background-color: transparent;
    border: 0;
    outline: 0;
    padding: 0;
}
.normal-btn{
    background-color: transparent;
    border: 0;
    outline: 0;
    padding: 0;
}
.normal-link{
    border: 0;
    outline: 0;
    background-color: transparent;
    text-decoration-line: none;
    font-size: var(--font-14);
    font-family: var(--Font-Face-SemiBold);
    color: var(--primary-blue-500);
    padding: 0;
}
.material-symbols-outlined::after {
    content: attr(data-icon);
    display: inline-block;
}
.card{
    border-radius: var(--border-radius-md);
    border: 0;
    box-shadow: var(--card-shadow);
}
/* #main-site::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 95px;
    background-color: var(--blue-50);
    z-index: -1;
}    */
.btn{
    font-size: 14px;
    font-family: var(--Font-Face-SemiBold);
    color: var(--text-white);
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    min-height: 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    outline: 0 !important;
    border: 0 !important;
}
.btn-primary{
    background-color: var(--primary-blue-500)!important;
    border-color: var(--primary-blue-500) !important;
}
.btn-outline-primary{
    background-color: transparent !important;
    border:2px solid var(--primary-blue-500) !important;
    color:var(--primary-blue-500) !important;
}
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:hover{
    color:var(--primary-blue-500) !important;
}
.btn:hover, .btn:focus, .btn:active{color: var(--text-white) !important;}
.btn-gradient{
    background: linear-gradient(277deg, #FB923C 0%, #DB2777 99.99%) no-repeat;
}
.Ai-gradient-text{
    color: transparent !important;
    background: linear-gradient(135deg, #4A3ED2 0%, #5A39C8 8%, #832DB0 24%, #C6198A 60%, #FF096A 80%, #FF096A 79%, #FF096A 99%);
    background-clip: text;
}
.gradient-text{
    background: linear-gradient(90deg, var(--pink-500) 20%, var(--orange-500) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.grid-space{
    --bs-gutter-x: 15px;
    margin-right: calc(-1 * var(--bs-gutter-x));
    margin-left: calc(-1 * var(--bs-gutter-x));
    width: calc(100% + 2 * var(--bs-gutter-x));
    max-width: calc(100% + 2 * var(--bs-gutter-x));
    display: flex;
    flex-wrap: wrap;
}
.grid-space>*{
    padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1);
}
.grid-space-10,
.grid-space-12,
.grid-space-24{
    --bs-gutter-x: 12px;
    margin-right: calc(-1 * var(--bs-gutter-x));
    margin-left: calc(-1 * var(--bs-gutter-x));
    width: calc(100% + 2 * var(--bs-gutter-x));
    max-width: calc(100% + 2 * var(--bs-gutter-x));
    display: flex;
    flex-wrap: wrap;
}
.grid-space-10>*,
.grid-space-12>*,
.grid-space-24>*{
    padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1);
}
.grid-space-24{--bs-gutter-x: 24px;}
.grid-space-10{--bs-gutter-x: 10px;}
section.top-companies::before {
    position: absolute;
    content: '';
    background-color: var(--gray-50);
    width: 100%;
    height: calc(var(--companies-sec-height) - var(--client-logo-height) / 2);
    z-index: -9;
    top: 0;
}
.integrated-hr-payroll-software-tab{
    margin: 120px 0 0;
    border-top:2px solid var(--purple-200);
}
.integrated-hr-payroll-software-tab-header{
    margin: -65px 0 0;
}
.integrated-tabs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.integrated-tabs-scroll::-webkit-scrollbar { display: none; }
.avatar{
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: var(--text-white);
}
.avatar.avatar-xs{
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
}
.avatar.avatar-sm{
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}
.avatar.avatar-md{
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
}
.avatar.avatar-lg{
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
}
.avatar.avatar-xl{
    width: 90px;
    height: 90px;
    min-width: 90px;
    min-height: 90px;
}
.bottom-line .nav-link{position: relative;}
.bottom-line .nav-link::before{
    content: "";
    position: absolute;
    height: 3px;
    left: 0;
    right: 0;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition-duration: 0.4s;
    transition-property: transform;
    transition-timing-function: ease-out;
    background-color: var(--bg-white);
}
.bottom-line .nav-link.active::before{
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
.integrated-hr-payroll-software-tab-header .bottom-line .nav-link::before{
    bottom: -24px;
}
.nav-item:has(.nav-item:has(.active)) .avatar img {
    content: attr(data-image);
}
.factoHR-empowers-section>.col-lg-5.col-md-6 {
    width: 590px;
}
.factoHR-empowers-section>.col-lg-7.col-md-6 {
    width: calc(100% - 568px);
}
/* Client Testimonials */
.client-testimonials-body {
    display: flex;
    align-items: flex-start;
    padding-left: max(16px, calc((100vw - 1248px) / 2 + 12px));
    position: relative;
}
.testimonials-left{
    max-width: 160px;
    min-width: 160px;
    flex-shrink: 0;
    padding: 0 30px 0 0;
    position: absolute;
    left: max(16px, calc((100vw - 1248px) / 2 + 12px));
    top: 0;
    z-index: 9;
    height: 100%;
}
.testimonials-left::before{
    position: absolute;
    content: '';
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    top: 0;
    left: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) -4.56%, var(--bg-white) 30%);
    z-index: -9;
}
.testimonial-nav-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    border: 2px solid var(--primary-blue-500);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary-blue-500);
    transition: opacity 0.2s, border-color 0.2s, color 0.2s;
}
.testimonial-nav-btn:disabled {
    border-color: var(--primary-blue-200);
    color: var(--primary-blue-200);
    cursor: not-allowed;
}
.testimonials-slider-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.testimonials-slider-wrap swiper-container {
    width: 100%;
    overflow: visible;
}
.testimonials-slider-wrap .swiper-slide {
    max-width: 300px;
    min-width: 300px;
    height: 100%;
    position: relative;
}
.testimonial-author{
    padding: 16px 0 16px 30px; 
}
.testimonial-author .avatar {
    filter:drop-shadow(0 0 10px rgba(0, 0, 0, 0.10));
    padding: 3px;
    overflow: hidden;
}
.testimonial-author .avatar>img {
    overflow: hidden;
    border-radius: 100%;
    width: 100%;
}
.testimonial-card::before {
    position: absolute;
    content: '';
    background-color: var(--primary-blue-50);
    width: 50px;
    height: 50px;
    bottom: -40px;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Industry Section */
.industry-tabs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.industry-tabs-scroll::-webkit-scrollbar { display: none; }
.bg-purple-50 .tabs-edge-fade { --tabs-fade-color: var(--purple-50);position: relative;}
.tabs-edge-fade::before,
.tabs-edge-fade::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.tabs-edge-fade::before {
    left: -2px;
    background: linear-gradient(to right, var(--purple-50), transparent);
}
.tabs-edge-fade::after {
    right: -2px;
    background: linear-gradient(to left, var(--purple-50), transparent);
}
.tabs-edge-white-fade::before{
    background: linear-gradient(to right, var(--bg-white), transparent);
}
.tabs-edge-white-fade::after{
    background: linear-gradient(to left, var(--bg-white), transparent);
}
.tabs-edge-fade.fade-start::before,
.tabs-edge-fade.fade-end::after{ opacity: 1; }
@media (max-width: 575.98px) {
    .tabs-edge-fade::before,
    .tabs-edge-fade::after { width: 32px; }
}
.button-tab-pane {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: none;
    color: var(--heading-color);
    font-family: var(--Font-Face-Medium);
    font-size: var(--font-16);
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--border-radius-sm);
}
/* Auto-rotate progress bar on tab buttons */
.button-tabs-nav .button-tab-pane {
    position: relative;
    overflow: hidden;
}
.button-tabs-nav .button-tab-pane::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--purple-500);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}
.button-tabs-nav .button-tab-pane.active::after {
    animation: tabProgress var(--tab-progress-duration, 8s) linear forwards;
    animation-play-state: paused;
}
.button-tabs-nav.tabs-autoplay .button-tab-pane.active::after {
    animation-play-state: running;
}
@keyframes tabProgress {
    to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
    .button-tabs-nav .button-tab-pane.active::after { animation: none; }
}
.industry-tab-content{ margin-top: 40px; }
.list-with-green-tick,
.list-with-red-mark{
    list-style: none;
    font-size: var(--font-16);
    color: var(--heading-color);
    font-family: var(--Font-Face-Medium);
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
    line-height: normal;
}
.list-with-green-tick li,
.list-with-red-mark li{
    display: flex;
    align-items: center;
    gap: 10px;
}
.list-with-green-tick li:before{
    content: '\e86c';
    font-family: var(--MaterialIcons-Font-Face-Regular-fill);
    font-size: 20px;
    color:var(--green-500);
    line-height:var(--lh-20);
}
.list-with-red-mark li:before{
    content: '\e5c9';
    font-family: var(--MaterialIcons-Font-Face-Regular-fill);
    font-size: 20px;
    color: var(--red-500);
    line-height:var(--lh-20);
}
.list-with-border>li:not(:last-child){
    padding: 16px 0;
    border-bottom:1px solid var(--gray-200)
}
.list-with-border>li:last-child{
    padding: 16px 0 0;
}
.lh-40{line-height: 40px !important;}
.ind_left_dtl_card {
    bottom: 50px;
    left: -40px;
}
.ind_right_dtl_card{
    top: 0;
    right: 0;
}
#CustomerStoriesSwiper swiper-slide {
    max-width: 600px;
    min-width: 600px;
    position: relative;
}
.customer-stories-rectangle{
    width: 118px;
    height: 150px;
    overflow: hidden;
    transform: rotate(-7.592deg);
    border: 5px solid var(--bg-white);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
    border-radius: var(--border-radius-md);
    margin: -60px 0 0;
}
.customer-stories-rectangle>img {
    height: 100%;
}
#CustomerStoriesSwiper::part(container) {
    overflow: visible !important;
}
.btn-md{min-height: 45px;}
.customer_swiper_pagination{
    position: unset;
    margin: 48px 0 0;
    display: block;
    text-align: center;
}
.security .list-with-green-tick li:before {
    content: '\e52d';
}
.factohr-favicon-wrapper{
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, var(--navy-200) 0%, rgba(227, 234, 255, 0.00) 71.53%);;
}
.factohr-favicon-line::before {
    content: "";
    position: absolute;
    width: calc(50% - 35px);
    height: 1px;
    left: 0;
    background: linear-gradient(90deg, rgba(201, 214, 255, 0.00) 0%, var(--navy-200) 100%);
    top: 50%;
}
.factohr-favicon-line::after {
    content: "";
    position: absolute;
    width: calc(50% - 35px);
    height: 1px;
    right: 0;
    background: linear-gradient(90deg, var(--navy-200) 0%, rgba(201, 214, 255, 0.00) 100%);
    top: 50%;
}
.awards-rectangle{
    border-radius: 25px 25px 0 0;
    min-height: 150px;
}
.awards-image-margin{
    margin: -80px 0 0;
    transition: all 0.4s ease;
}
.awards-rectangle:hover .awards-image-margin{
    transform: scale(1.1);
}
.awards-rectangle.bg-orange-100{
    background: linear-gradient(180deg, var(--orange-100) 0%, rgba(255, 247, 237, 0.00) 65%) !important;
}
.awards-rectangle.bg-purple-100{
    background: linear-gradient(180deg, var(--purple-100) 0%, rgba(237, 233, 254, 0.00) 65%) !important;
}
.awards-rectangle.bg-green-100{
    border-radius: 25px 25px 0 0;
    background: linear-gradient(180deg, var(--green-100) 0%, rgba(225, 247, 230, 0.00) 65%) !important;
}
.awards-rectangle.bg-blue-100{
    background: linear-gradient(180deg, var(--blue-100) 0%, rgba(220, 235, 255, 0.00) 65%) !important;
}
.awards-rectangle.bg-pink-100{
    background: linear-gradient(180deg, var(--pink-100) 0%, rgba(252, 231, 243, 0.00) 65%) !important;
}
/* .footer-cert-badge img {
    filter: invert(1) brightness(100);
} */
.footer-nav-links {
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    color: var(--slate-50);
}
.footer-nav-links li a {
    font-size: var(--font-14);
    color:var(--slate-50);
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition: all 0.4s ease;
}
.footer-nav-links li a:hover{
    transform: translateX(5px);
}
.ftr-copyright .footer-nav-links li a:hover{
    transform: translateX(0);
}
.ftr-copyright .footer-nav-links li a.active,
.ftr-copyright .footer-nav-links li a:hover {
    background: linear-gradient(90deg, var(--pink-500) 20%, var(--orange-500) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.footer-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    text-decoration: none;
    border: 0;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.footer-social-btn:hover {
    background-color: rgba(255, 255, 255, 0.22);
    color: var(--text-white);
}
.footer-nav-links.d-grid {
    grid-template-columns: repeat(4, 1fr);
}
.ftr-address{
    background-color:rgba(59,15,134,0.25);
    padding: 30px;
    border-radius:var(--border-radius-lg);
}
address.paragraph p.font-14 {
    line-height: 22px !important;
}
.ftr-copyright .footer-nav-links li:not(:last-child){
    padding:0 10px 0 0;
}
.ftr-copyright .footer-nav-links li:not(:last-child)::after {
    content: '|';
    color: var(--text-white);
    position:absolute;  
    right:0;
    top: 2px;
    font-size: var(--font-12);
    font-family: var(--Font-Face-Bold);
}
.ftr-logo-lg-text{
    opacity: 0.10;
    margin: 30px 0 0;
}
.nav-tabs .nav-link.tab-border-box{
    border-radius: var(--border-radius-sm) !important;
    border: 2px solid transparent;
    min-width: 110px;
    min-height: 100px;
}
.nav-tabs .nav-link.tab-border-box.active{
    border-color: var(--purple-500);
}
/* Auto-rotate progress bar on Feature_TanPane */
.Feature_TanPane .nav-link {
    position: relative;
    overflow: hidden;
}
.Feature_TanPane .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--tab-color, var(--purple-500));
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}
.Feature_TanPane .nav-link.active::after {
    animation: tabProgress var(--tab-progress-duration, 5s) linear forwards;
    animation-play-state: paused;
}
.Feature_TanPane.tabs-autoplay .nav-link.active::after {
    animation-play-state: running;
}
[data-color="purple"]{ --tab-color: var(--purple-500); }
[data-color="primary-blue"]{ --tab-color: var(--primary-blue-500); }
[data-color="blue"]{ --tab-color: var(--blue-500); }
[data-color="sky-blue"]{ --tab-color: var(--sky-blue-500); }
[data-color="green"]{ --tab-color: var(--green-500); }
[data-color="orange"]{ --tab-color: var(--orange-500); }
[data-color="rose"]{ --tab-color: var(--rose-500); }
[data-color="pomegranate-red"]{ --tab-color: var(--pomegranate-red-500); }
[data-color="amber"]{ --tab-color: var(--amber-500); }
@media (prefers-reduced-motion: reduce) {
    .Feature_TanPane .nav-link.active::after { animation: none; }
}
/* =========================================
   Case Study — Thumb Gallery Swiper
   ========================================= */

/* Each main slide: video left + quote right */
.cs-gallery-slide {
    min-height: 337px;
}
.cs-gallery-video-col {
    width: 55%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.cs-gallery-video-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stat badge */
.cs-stat-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    padding: 10px 16px;
    text-align: center;
    min-width: 130px;
}
.cs-stat-value {
    display: block;
    font-size: var(--font-26);
    font-family: var(--Font-Face-Bold);
    color: var(--orange-500);
    line-height: 1.1;
}
.cs-stat-label {
    display: block;
    font-size: var(--font-13);
    color: var(--body-color);
    margin-top: 2px;
}

/* Play button */
.cs-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.90);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--orange-500);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    transition: background 0.2s, transform 0.2s;
}
.cs-play-btn:hover {
    background: #fff;
    transform: translate(-50%, -60%) scale(1.08);
}

/* Controls bar */
.cs-video-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 100%);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cs-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.cs-play-icon { color: #fff; display: flex; align-items: center; }
.cs-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.35);
    border-radius: 2px;
    position: relative;
}
.cs-progress-fill {
    height: 100%;
    background: var(--orange-400);
    border-radius: 2px;
    position: absolute;
    top: 0; left: 0;
}
.cs-progress-dot {
    width: 10px; height: 10px;
    background: var(--orange-400);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.cs-time { color: rgba(255,255,255,0.85); white-space: nowrap; }
.cs-ctrl-icons { color: rgba(255,255,255,0.85); gap: 10px !important; }
.cs-ctrl-icons i { cursor: pointer; }

/* Quote side */
.cs-quote-icon { display: block; }
.cs-slide-company { color: var(--body-color); opacity: 0.65; }

/* Thumbnail swiper */
.cs-gallery-thumbs {
    cursor: pointer;
}
.cs-gallery-thumbs .swiper-slide {
    opacity: 1;
}

/* Thumb card */
.cs-thumb-item{
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-white);
    border-radius: var(--border-radius-md);
    padding: 10px;
    transition: border-color 0.25s, background 0.25s;
    cursor: pointer;
    height: 100%;
    position: relative;
    z-index: -9;
}
.cs-thumb-item::before {
    position: absolute;
    content: '';
    top: 3px;
    left: 3px;
    border-radius: 12px;
    background: var(--bg-white);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
}
.cs-thumb-item::after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    border-radius: var(--border-radius-md);
    width: 100%;
    height: 100%;
    z-index: -9;
    transition: all 0.4s ease;
}
.swiper-slide-visible.swiper-slide-thumb-active .cs-thumb-item::after{
    background: linear-gradient(90deg, #F5428C 20%, #F97316 80%);
    transition: all 0.4s ease;
}
/* Thumb image */
.cs-thumb-img-wrap {
    width: 170px;
    height: 115px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.cs-thumb-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cs-thumb-play-icon {
    position: absolute;
    inset: 0; margin: auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange-500);
    pointer-events: none;
}

/* Thumb text */
.cs-thumb-info { flex: 1; min-width: 0; }
.cs-thumb-name {
    font-size: var(--font-14);
    font-family: var(--Font-Face-SemiBold);
    color: var(--text-white);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-thumb-company {
    font-size: var(--font-13);
    color: rgba(255,255,255,0.60);
    margin: 0 0 4px;
}
.cs-thumb-stat {
    font-size: var(--font-12);
    color: rgba(255,255,255,0.80);
    margin: 0;
    line-height: 1.4;
}
.testi-title-with-line{
    position: relative;
    margin: 0 0 20px;
    padding: 0 0 15px;
}
.testi-title-with-line::before{
    position: absolute;
    content: '';
    width: 50px;
    height: 3px;
    background-color: var(--orange-500);
    left: 0;
    bottom: 0;
}
.cs-gallery-slide .vplayer video, 
.cs-gallery-slide .vplayer .vp-poster{
    object-fit: cover;
}
.cs-thumb-item .testi-title-with-line{
    margin: 0 0 20px;
    padding: 0 0 10px;
}
.cs-thumb-item .vp-bigplay {
    width: 40px;
    height: 40px;
    top: unset;
    bottom: 0;
    left: unset;
    transform: unset !important;
    right: 0;
    margin: 14px;
}

/* #header.show {
    top: -100px;
} */
#header{
    transition: top .3s ease;
}
/* .btn_overlapX{
    position: relative;
    overflow: hidden;
    z-index: 9;
}
.btn_overlapX:before, .btn_overlapX:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color:rgba(6, 73, 237, 0.80);
  transition: 0.4s;
  z-index: -9;
}
.btn_overlapX:after{
    left: auto;
    right: 0;
}
.btn.btn-outline-primary.btn_overlapX:hover {
    color: var(--text-white) !important;
    border-color:rgba(6, 73, 237, 0.90) !important;
}
.btn_overlapX:hover:before, 
.btn_overlapX:hover:after{
  width: 100%;
} */
.modal-dialog.modal-sm{
    max-width: 576px;
}
.normal-link:hover>svg,
.btn:hover>svg
.normal-link:hover>i,
.btn:hover>i{
    transform: translateX(3px);
}
.zoomIn.fade .modal-dialog {
  transform: scale(0.8);
  transition: transform 0.3s cubic-bezier(.32,.72,.24,1), opacity 0.3s ease;
}
.zoomIn.show .modal-dialog {
  transform: scale(1);
}
.new-modal-dialog .modal-body{
    max-height: calc(100vh - 114px);
    overflow: auto;
}
.slide-tabs .tab-pane{
  display:block;
  position:absolute;
  left:0;
  right:0;
  transform:translateX(100%);
  /* transition:transform .70s cubic-bezier(.32,.72,.24,1); */
  transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.slide-tabs .tab-pane.active{
  transform:translateX(0);
  position:relative;
}
.slide-tabs .tab-pane.slide-left{transform:translateX(-100%);}
.slide-tabs .tab-pane.slide-right{transform:translateX(100%);}
.tw-cursor{
    display:inline-block;
    width:3px;
    height:50px;
    margin-left:2px;
    vertical-align:-0.08em;
    background: linear-gradient(90deg, #F5428C 20%, #F97316 80%);
    animation:tw-blink 1s steps(1) infinite;
}
.heading-2 .tw-cursor {
    height: 30px;
}
@keyframes tw-blink{ 50%{opacity:0;} }
.ftr-social-media > .normal-btn {
    position: relative;   /* anchor the absolute SVGs to THIS circle */
    overflow: hidden;     /* clip the sliding icon so it can't spill out */
}

.ftr-social-media > .normal-btn > .social-icn {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform .3s cubic-bezier(.32, .72, .24, 1);
}
.ftr-social-media > .normal-btn > .social-icn:first-child {
    transform: translate(-50%, -50%);
}
.ftr-social-media > .normal-btn > .social-icn:last-child {
    transform: translate(-50%, calc(-50% + 150%));
}
.ftr-social-media > .normal-btn:hover > .social-icn:first-child {
    transform: translate(-50%, calc(-50% - 150%));
}
.ftr-social-media > .normal-btn:hover > .social-icn:last-child {
    transform: translate(-50%, -50%);
}
/* .btn_overlapX2 {
    position: relative;
    overflow: hidden;
    z-index: 9;
}
.btn_overlapX2:before,
.btn_overlapX2:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: rgba(6, 50, 218, 0.80);
    transition: 0.4s;
    z-index: -9;
}
.btn_overlapX2:after {
    left: auto;
    right: 0;
}
.btn_overlapX2:hover {
    color: #fff !important;
    border-color: rgba(6, 50, 218, 0.90) !important;
}
.btn_overlapX2:hover:before,
.btn_overlapX2:hover:after {
    width: 100%;
} */

.trust-card{
    transition:transform .35s cubic-bezier(.32,.72,.24,1), border-color .35s ease, background-color .35s ease;
}
.trust-card:hover{
    transform:translateY(-6px);
    background-color:#E2DBFA;
}
.trust-badge{
    transition:transform .4s cubic-bezier(.32,.72,.24,1);
}
.trust-card:hover .trust-badge{
    transform:scale(1.08);
}
.swiper-pagination {
    position: unset;
    margin: 50px auto 0;
    background-color: var(--primary-blue-50);
    width: max-content !important;
    padding: 8px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.swiper-pagination-bullet {
    margin: 0 !important;
    width: 16px;
    height: 16px;
    background-color: var(--primary-blue-100);
    opacity: 1;
    transition: all 0.4s ease;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 47px;
    border-radius: 40px;
    background-color: var(--primary-blue-200);
}
.cs-gallery-main-card.p-2{
    padding:10px !important;
}
.cs-main-pagination {
    display: none;
    margin-top: 16px;
    text-align: center;
}
.cs-main-pagination .swiper-pagination-bullet {
    margin: 0 4px;
}
.ClientTestimonials .swiper-wrapper {padding-left: 200px;}
[data-aos="fade-up"] {transform: translate3d(0, 20px, 0);}
/* Custom Spacing */
@media (min-width: 992px) {
    .pe-lg-14{padding-right:14px !important;}
    .mt-lg-40{margin-top:40px !important;}
    .mt-lg-60{margin-top:60px !important;}
    .pt-lg-40{padding-top:40px !important;}
    .pt-lg-60{padding-top:60px !important;}
    .mb-lg-40{margin-bottom:40px !important;}
    .mb-lg-60{margin-bottom:60px !important;}
    .pb-lg-40{padding-bottom:40px !important;}
    .pb-lg-60{padding-bottom:60px !important;}
    .py-lg-40{padding-top:40px !important;padding-bottom:40px !important;}
    .pb-lg-100{padding-bottom:100px !important;}
}
@media (min-width: 300px) and (max-width: 575px) {
    .col-xs-6{flex: 0 0 auto;width: 50%;}
    .col-xs-12{flex: 0 0 auto;width: 100%;}
}
@media (min-width: 576px) {
    .d-sm-block{display: block !important;}
}


.btn-hover1>i,
.btn-hover1>svg{
    opacity: 0;
    transition: left 0.3s 0s, top 0.3s 0s, opacity 0.3s 0s;
    top:6px;
    position:relative;
}
.btn-hover1:hover>i,
.btn-hover1:hover>svg{
    top: 0;
    opacity: 1;
    transition: left 0.3s 0s, top 0.3s 0.1s, opacity 0.3s 0.1s;
    transform: translateX(0);
}
.btn-hover1>span{
    left: 10px;
    position: relative;
    transition: left 0.4s 0.1s;
}
.btn-hover1:hover>span{
    left: 0;
    transition: left 0.4s;
}
/* Hover Button V2 */
.btn-arrow__icon {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    overflow: hidden;
}
.btn-arrow__icon .ico {
    position: absolute;
    left: 0;
    top: 0;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
.btn-hover2 .btn-arrow__icon .ico:nth-child(2) {
    top: 0;
    transform: translate(-100%, 100%);
}
.btn-hover2:hover .btn-arrow__icon .ico {
    transform: translate(100%, -100%);
}
.btn-hover2:hover .btn-arrow__icon .ico:nth-child(2) {
    transform: translate(0, 0);
}
#SwiperCustomerStories .swiper-slide{
    flex: 0 0 auto;
    width: 100%;
    max-width: 610px;
    height: auto;
    margin-right: 24px;
}
.card:has(.client-logo-grid) {
    overflow: hidden;
}
.client-logo-grid {
    margin-right: -1px;
    margin-bottom: -1px;
    width: calc(100% - -2px);
}
.client-sing-logo {
    min-height: 120px;
    border-right: 1px solid var(--blue-100);
    border-bottom: 1px solid var(--blue-100);
    transition: background-color 0.2s ease;
}
.client-sing-logo img {
    max-height: 50px;
    max-width: 100%;
    object-fit: contain;
    transition: opacity 0.2s ease;
}
/* Attendance Management System */
.hrtech-partner{
    gap: 40px;
}
.hrtech-partner .hrtech-partner-sing:not(:last-child){
    padding: 0 40px 0 0;
    border-right: 1px solid var(--primary-blue-200);
}
.hrtech-partner .hrtech-partner-sing:last-child{padding: 0;}
.cursor-pointer{cursor: pointer !important;}
.accordian-main .toggle-ans {display: none;}
.accordian-sing-box{transition: all 0.4s ease;}

.feature-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.feature-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.feature-compare-table thead th {
    padding:14px 20px;
    font-family: var(--Font-Face-Bold);
    font-size: var(--font-18);
    color: var(--heading-color);
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--gray-300);
    vertical-align: middle;
    text-align: left;
    width: 20%;
    min-width: 200px;
}
.feature-compare-table tbody td {
    padding: 14px 20px;
    font-size: var(--font-16);
    color: var(--body-color);
    border-bottom: 1px solid var(--gray-300);
    vertical-align: middle;
}
.feature-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.feature-compare-table .cmp-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.feature-compare-table .cmp-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.feature-compare-table .factorhr-col {
    background-color: var(--primary-blue-50);
    border-left: 2px solid var(--primary-blue-500);
    border-right: 2px solid var(--primary-blue-500);
    border-bottom-color:var(--primary-blue-200);
}
.feature-compare-table thead th:last-child{
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
    border-top: 2px solid var(--primary-blue-500) !important;
}
.feature-compare-table tr:last-child td:last-child{
    border-bottom: 2px solid var(--primary-blue-500) !important;
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
}
.table.table-bordered {
    border-color: var(--gray-300);
}
.corner-blob {
    position:absolute;
    left:0;
    bottom:0;
    z-index:0;
    width:140px;
    height:100px;
    clip-path: path("M0 0 C30 40 90 95 140 100 L15 100 Q0 100 0 85 Z");
}
.dot-grid {
    --dot-size: 3px;
    --dot-gap: 12px;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 24px;
    z-index: 1;
    background-image: radial-gradient(currentColor var(--dot-size), transparent var(--dot-size));
    background-size: var(--dot-gap) var(--dot-gap);
}
.button-tabs-nav.button-primary-nav .button-tab-pane::after{
    background: var(--primary-blue-200);
    height: 100%;
    z-index: -9;
}
.EveryInd_single{gap: 40px;}
.EveryInd_single>.col-lg-7{
    width: calc(55% - 20px);
}
.EveryInd_single>.col-lg-5{
    width: calc(45% - 20px);
}
.min-h-auto{min-height: auto !important;}
.EveryInd_Attendance_Stepper>.d-flex.position-relative:not(:last-child){
    padding: 0 0 40px;
}
.EveryInd_Attendance_Stepper>.d-flex.position-relative>.avatar{
    position: relative;
    overflow: unset;
}
.EveryInd_Attendance_Stepper>.d-flex.position-relative:not(:last-child)>.avatar::after {
    content: '';
    position: absolute;
    background-color: var(--bg-white);
    height: 4px;
    bottom: -4px;
    width: 100%;
}
.EveryInd_Attendance_Stepper>.d-flex.position-relative:not(:first-child)>.avatar::before {
    content: '';
    position: absolute;
    background-color: var(--bg-white);
    height: 4px;
    top: -4px;
    width: 100%;
}
.EveryInd_Attendance_Stepper{
    position: relative;
    z-index:9;
}
.EveryInd_Attendance_Stepper::before {
    content: '';
    height: calc(100% - 30px);
    background-color: var(--gray-200);
    display: block;
    width: 1px;
    position: absolute;
    bottom: 20px;
    left: 25px;
    z-index: -9;
}
.Attendance_Tracking_Tabs>.card{
    border: 2px solid transparent;
}
.Attendance_Tracking_Tabs>.card.active{
    border-color:var(--primary-blue-500);
}
.Attendance_Tracking_Tabs>.card.active .avatar.bg-gray-50.text-gray-400{
    background-color:var(--primary-blue-50) !important;
    color:var(--primary-blue-500) !important;
}
.feature-compare-table thead th:nth-last-child(2), 
.feature-compare-table tbody td:nth-last-child(2) {
    border-right: transparent;
}
.faq .accordian-main .toggle-ans {
    width: calc(100% - 40px);
}
.cta-right-part{
    position: absolute;
    right: 0;
    bottom: 0;
}
.tabs-edge-fade:has(.button-tab-pane.bg-white)::before{
    background: linear-gradient(to right, var(--primary-blue-50), transparent);
}
.tabs-edge-fade:has(.button-tab-pane.bg-white)::after {
    background: linear-gradient(to left, var(--primary-blue-50), transparent);
}
#EveryIndustryTabs{justify-content: safe center;}
.cs-thumb-img-wrap>img {
    height: 100%;
    object-fit: cover;
    object-position: 23% 100%;
}
.client-logo-scroll::-webkit-scrollbar-thumb,
.client-logo-grid::-webkit-scrollbar-thumb{
    background-color:transparent;
}
.list-items{
    font-size: var(--font-18);
    color: var(--body-color);
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    line-height: normal;
}
.row.px-24 {
    --bs-gutter-x: 24px;
    margin-right: calc(-1.5 * var(--bs-gutter-x));
    margin-left: calc(-1.5 * var(--bs-gutter-x));
    width: calc(100% + 3 * var(--bs-gutter-x));
}
.scroll-feature-bg {
    position: absolute;
    inset: 0;
    background-color: var(--pink-50);
    transition: background-color 0.5s ease;
    z-index: -1;
}
.scroll-feature-bg[data-active="primary-blue"]{ background-color: var(--primary-blue-50); }
.scroll-feature-bg[data-active="red"]{ background-color: var(--red-50); }
.scroll-feature-bg[data-active="green"]{ background-color: var(--green-50); }
.scroll-feature-bg[data-active="pink"]{ background-color: var(--pink-50); }
.scroll-feature-bg[data-active="amber"]{ background-color: var(--amber-50); }
.scroll-feature-bg[data-active="purple"]{ background-color: var(--purple-50); }

.scroll-feature-grid {
    --bs-gutter-x: 40px;
    gap: 0;
}

/* ============================================================
   True "fullpage scroll": one wheel/swipe/key gesture = one full
   slide transition, not a continuous native scroll that merely snaps
   at rest. #ScrollFeatureShowcase's .row is a fixed 100vh viewport
   with overflow:hidden (nothing scrolls natively inside it); JS
   moves .scroll-feature-track with translateY, one 100vh step per
   gesture, and this transition is what animates the current slide
   fully out before the next one appears.
   ============================================================ */
#ScrollFeatureShowcase.section-spacing {
    padding: 0;   /* the section itself must be exactly 100vh -- no extra top/bottom padding */
}
#ScrollFeatureShowcase .row.px-24 {
    height: 100vh;
    overflow: hidden;
}

/* Visual column: no longer needs position:sticky (nothing scrolls under it
   anymore -- the row itself is a fixed 100vh viewport), just fills its height */
.scroll-feature-visual-sticky {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes fadeOutBottomToTop {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}
@keyframes fadeInTopToBottom {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.scroll-feature-visual-frame {
    width: 100%;
    height: auto;
    display: block;
}
.scroll-feature-visual-frame.fade-in {
    animation: fadeInTopToBottom 0.6s ease-out forwards;
}
.scroll-feature-visual-frame.fade-out {
    animation: fadeOutBottomToTop 0.4s ease-in forwards;
}
.scroll-feature-visual-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 100%;
    height: auto;
}
/* Text column is the fixed 100vh "window" onto the track */
.scroll-feature-text-col {
    height: 100vh;
    overflow: hidden;
    position: relative;
}
/* The track holds all 6 slides stacked vertically and is what JS moves --
   translateY(-N * 100vh) to page to slide N. The transition here is the
   entire "current section fully transitions out before next appears" effect. */
.scroll-feature-track {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}
.scroll-feature-block {
    flex: 0 0 100vh;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;   /* safety net: lets a slide's own content scroll internally on short/landscape mobile viewports instead of clipping */
}

/* Pagination dots */
.scroll-feature-dots {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 2;
}
.scroll-feature-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--primary-blue-500, #2563eb);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.scroll-feature-dot.active {
    background: var(--primary-blue-500, #2563eb);
    transform: scale(1.2);
}
@media (max-width: 991px) {
    .scroll-feature-dots { right: 16px; gap: 10px; }
    .scroll-feature-dot { width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-feature-track { transition: none; }
    .scroll-feature-dot { transition: none; }
}
#ScrollFeatureShowcase {
    position: relative;
    z-index: 0;
}
.badge{
    width: max-content;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-size: 16px;
    font-family: var(--Font-Face-Bold);
    line-height:normal;
}
.smart-attendance-factohr>.col-lg-6 {
    width: calc(50% - 38px);
}
.smart-attendance-compare{
    position: relative;
    z-index: 9;
    display: flex;
    align-items: center;
}
.smart-attendance-compare::before {
    position: absolute;
    content: '';
    width: 2px;
    height: calc(100% - 36px);
    background-color: var(--gray-200);
    top: 18px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -9;
}
.swiper-pagination-arrow .swiper-pagination{
    background-color: transparent;
    padding: 0;
    margin: 0;
}
.swiper-pagination-arrow .swiper-pagination-bullet{
    background-color: var(--gray-400);
}
.swiper-pagination-arrow .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--bg-white);
}
.swiper-pagination-arrow {
    margin: 40px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.swiper-button-disabled {
    opacity: 0.5;
}
.what-is-card-title-bg{
    padding:30px 40px;
    max-width:310px;
}
.what-is-card-rh-content{
    padding:30px 200px 30px 30px;
    display:flex;
    align-items: flex-start;
    column-gap: 60px;
    position: relative;
}
.swiper-prev-arrow:hover, .swiper-prev-arrow:focus {
    transform: scale(0.95);
}
.testi-company-logo{
    max-width: 100px;
    max-height: 58px;
}
.what-is-card-rh-content>.img-fluid.d-none.d-lg-block {
    position: absolute;
    right: 0;
    margin: 0 30px 0 0;
    bottom: 0;
}
.slide-tabs .vertical-tab-fade .tab-pane{
    position: unset;
    transform: translateX(0);
    display: none;
    transition: all 0.2s ease;
}
.slide-tabs .vertical-tab-fade.tab-content>.active {
    display: block;
}
.rounded-start-0 {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}
.swiper-navigation-primary.swiper-pagination-arrow .swiper-pagination-bullet{
    background-color: var(--primary-blue-200);
}
.swiper-navigation-primary.swiper-pagination-arrow .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--primary-blue-500);
}
.tabs-edge-navy-fade::before {
    background: linear-gradient(to right, var(--primary-blue-950, var(--primary-blue-950)), transparent);
    z-index: 9;
    width: 60px;
}
.tabs-edge-navy-fade::after {
    background: linear-gradient(to left, var(--primary-blue-950, var(--primary-blue-950)), transparent);
    z-index: 9;
    width: 60px;
}
.avatar-sq{
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: var(--text-white);
}
.avatar-sq.avatar-xs{
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
}
.avatar-sq.avatar-sm{
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}
.avatar-sq.avatar-md{
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
}
.avatar-sq.avatar-lg{
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
}
.avatar-sq.avatar-xl{
    width: 90px;
    height: 90px;
    min-width: 90px;
    min-height: 90px;
}
.breadcrumb{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}
.breadcrumb-item{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--heading-color);
}
.breadcrumb-item+.breadcrumb-item{
    padding: 0;
}
.breadcrumb-item a {
    color: var(--gray-400);
    text-decoration: none;
}
.breadcrumb-item+.breadcrumb-item::before{
    content: "";
    width: 5px;
    height: 5px;
    border-top: 1.5px solid var(--gray-400);
    border-right: 1.5px solid var(--gray-400);
    transform: rotate(45deg);
    padding: 0;

}
.divider {
    border: 0;
    border-top: 1px solid var(--gray-200);
    margin: 20px 0;
    opacity: 1;
}
.vr-divider {
    border: 0;
    border-right: 1px solid var(--gray-200);
    margin: 0 20px;
    opacity: 1;
}
.divider-label{
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    color: var(--body-color);
    font-size: 14px;
}
.divider-label::before, .divider-label::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--gray-200);
}
.divider-vertical>*:not(:last-child)::after {
    content:'';
    display: inline-block;
    width: 1px;
    min-height: 16px;
    background: var(--gray-200);
    height:100%;
    margin:0 20px;
}
.skeleton {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 45%, var(--gray-100) 65%);
    background-size: 200% 100%;
    animation: shimmer 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    color: transparent;
    user-select: none;
}
.skeleton--thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
}
@keyframes shimmer  { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton--title {
    height: 24px;
    width: 60%;
}
.skeleton--text {
    height: 14px;
}
.table tr th{
    font-size: 16px;
    font-family: var(--Font-Face-Bold);
    padding: 10px 14px;
    color:var(--heading-color);
    border-color:var(--gray-300);
}
.table tr td{
    font-size: 16px;
    font-family: var(--Font-Face-Regular);
    padding: 10px 14px;
    color:var(--body-color);
    border-color:var(--gray-300);
}
.table-bordered > :not(caption) > * > *:first-child { border-left: 0; }
.table-bordered > :not(caption) > * > *:last-child  { border-right: 0; }
.table-bordered thead tr:first-child { border-top: 0; }
.table-bordered tbody tr:last-child, .table tbody tr:last-child td{ border-bottom: 0; }
.table-hover>tbody>tr:hover>* {
    --bs-table-color-state: var(--body-color);
    --bs-table-bg-state: var(--primary-blue-50);
}
.shadow-sm{box-shadow: var(--shadow-sm) !important;}
.shadow-md{box-shadow: var(--shadow-md) !important;}
.shadow-lg{box-shadow: var(--shadow-lg) !important;}
/* Vertical auto-advance progress line -- Fia AI cards */
#Fia_Ai_TabContent {
    --tab-progress-duration: 6s;
}
#Fia_Ai_TabContent .vtab-item {
    position: relative;
    overflow: hidden;
    padding-left: 28px !important;
}
#Fia_Ai_TabContent .vtab-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--primary-blue-500, #2563eb) 0%, rgba(237, 233, 254, 0.00) 85%);
    transform: scaleY(0);
    transform-origin: top;
    pointer-events: none;
    transition: transform .3s ease;
}
#Fia_Ai_TabContent .vtab-item.active::after {
    animation: vtabProgress var(--tab-progress-duration, 6s) linear forwards;
    animation-play-state: paused;
}
#Fia_Ai_TabContent.vtabs-autoplay .vtab-item.active::after {
    animation-play-state: running;
}
#Fia_Ai_TabContent .vtab-item.completed::after {
    transform: scaleY(1);
    background: var(--primary-blue-500, #2563eb); /* solid — no gradient */
}
@keyframes vtabProgress {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

#Fia_Ai_TabContent .vtab-item.progress-complete::after {
    animation: none !important;
    transform: scaleY(1) !important;
    background: linear-gradient(180deg, var(--primary-blue-500, #2563eb) 0%, rgba(237, 233, 254, 0.00) 85%) !important;
}
@media (prefers-reduced-motion: reduce) {
    #Fia_Ai_TabContent .vtab-item.active::after { animation: none; }
}
.icon-font40{font-size: 40px !important;}
.w-max-content{width: max-content;}
.list-items-two-col{
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap:14px 28px;
}
.list-items-chips{
    gap:20px 14px;
}
.zigzag-sub-section{
    gap: var(--section-spacing);
}
.zigzag-single-section:nth-child(even){
    flex-direction: row-reverse;
}
.zigzag-col {column-gap: 20px;}
.zigzag-col .col-lg-7 {width: calc(54% - 10px);}
.zigzag-col .col-lg-5 {width: calc(46% - 10px);}
.testimonial-card:has(.testimonial-author)::before{
    width: 0;
    height: 0;
}
.simple-button-tab-pane {
    display: inline-flex;
    align-items: center;
    padding: 16px 24px;
    border: 2px solid var(--slate-200);
    border-bottom:0;
    background: var(--slate-50);
    color: var(--heading-color);
    font-family: var(--Font-Face-Medium);
    font-size: var(--font-18);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.simple-button-tab-pane:hover { background: var(--gray-200); color: var(--heading-color); }
.simple-button-tab-pane.active,
.simple-button-tab-pane.active:hover {
    background: var(--bg-white);
    color: var(--primary-blue-500);
    border-color: var(--primary-blue-500);
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}
.simple-tab-content {
    background: var(--slate-50);
    border:2px solid var(--slate-300);
    border-radius: var(--border-radius-lg);
    padding: 50px;
}
.timeline-progress>.w-14{
    width: 14%;
    padding: 15px 12px;
}
.timeline-progress .card {
    padding: 48px 18px;
    border-radius: 90px;
    height: 100%;
}
.timeline-progress .card::before {
    position: absolute;
    content: '';
    width: 13px;
    height: 13px;
    border-radius: 100%;
    background-color: var(--gray-300);
    top: -20px;
    right: 0;
    left: 0;
    margin: 0 auto;
}
.timeline-progress>.w-14:nth-child(even) .card.text-center::before{
    bottom: -20px;
    top: unset;
}
.timeline-progress .w-14 {
    position: relative;
    z-index: 2;
}
.timeline-progress .w-14::before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -2px;
    right: 0;
    border-radius: 100px;
    border: 2px solid var(--gray-300);
}
.timeline-progress .w-14:nth-child(odd)::before {
    clip-path: inset(0% -100% 50% -100%);
}
.timeline-progress .w-14:nth-child(even)::before {
    clip-path: inset(50% -100% 0% -100%);
}
.timeline-progress .w-14:nth-child(odd)::after {
    left: 50%;
    width: 100%;
}
.timeline-progress .w-14:nth-child(even)::after {
    right: 50%;
    width: 100%;
}
.slider-gradient-overlay{
    position: relative;
}
.ClientRating .swiper-wrapper {
    padding: 0 0 0 max(16px, calc((100vw - 1248px) / 2));
}
.slider-gradient-overlay::before,
.slider-gradient-overlay::after{
    position: absolute;
    content: '';
    width: 50px;
    height: 100%;
    top: 0;
    z-index: 9;
}
.slider-gradient-overlay::before{
    left: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) -4.56%, var(--bg-white) 50%);
}
.slider-gradient-overlay::after{
    right: 0;
    background: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) -4.56%, var(--bg-white) 50%);
}
.cs-gallery-quote-col {
    padding: 20px 20px 0;
    height: 100%;
}
.testi-company-logo + .d-block {
    width: calc(100% - 120px);
}
.testimonial-card{
    padding: 24px 30px 30px;
}
.ClientRating .testimonial-card{
    padding: 30px;
}
.lh-normal{line-height:normal !important;}
.h-60{height:60px;}
.mw-content{max-width: max-content;}
.w-90{width: 90%;}
.font-80{font-size: 80px;}
/* Full Page Section */
.feature-fullpage {
    height: 600vh;
    position: relative;
}
.feature-fullpage .fp-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.feature-fullpage .fp-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: background-color .7s ease;
    background-color: var(--primary-blue-50);
}
.feature-fullpage .fp-bg[data-active="primary-blue"] { background-color: var(--primary-blue-50, #eef5ff); }
.feature-fullpage .fp-bg[data-active="red"]{ background-color: var(--red-50);}
.feature-fullpage .fp-bg[data-active="green"]{ background-color: var(--green-50);}
.feature-fullpage .fp-bg[data-active="pink"]{ background-color: var(--pink-50);}
.feature-fullpage .fp-bg[data-active="amber"]{ background-color: var(--amber-50);}
.feature-fullpage .fp-bg[data-active="purple"]{ background-color: var(--purple-50);}
.feature-fullpage .fp-track {
    position: relative;
    z-index: 1;
    height: 100%;
    transition: transform .7s cubic-bezier(.77, 0, .175, 1);
    will-change: transform;
}
.feature-fullpage .fp-slide {
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    padding: 96px 0 48px;
}
.feature-fullpage .fp-slide-inner {
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.feature-fullpage .fp-slide-inner::-webkit-scrollbar { display: none; }
.feature-fullpage .fp-img {
    width: 100%;
    height: auto;
    max-width: 600px;
    max-height: min(56vh, 480px);
    object-fit: contain;
}
.feature-fullpage .fp-anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease;
}
.feature-fullpage .fp-slide.is-active .fp-anim { opacity: 1; transform: none; }
.feature-fullpage .fp-slide.is-active .fp-visual { transition-delay: .25s; }
.feature-fullpage .fp-slide.is-active h2.fp-anim { transition-delay: .3s; }
.feature-fullpage .fp-slide.is-active p.fp-anim  { transition-delay: .4s; }
.feature-fullpage .fp-slide.is-active ul.fp-anim { transition-delay: .5s; }

.Rate_Star_List {
    --fill: 0px;
    background-image: linear-gradient(90deg, var(--orange-500) 0 var(--fill), var(--gray-200) var(--fill));
    -webkit-background-clip: text;
    background-clip: text;
}
.Rate_Star_List,
.Rate_Star_List i {
    color: transparent;
}
.testimonial-card.border-2::after{
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition-property: opacity;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    background: radial-gradient(125.02% 125.69% at 50% 78.44%, var(--bg-white) .74% 44.71%, var(--primary-blue-200));
    z-index: -9;
}
.testimonial-card.border-2:hover::after{
    opacity: 1;
}
.border-1, .border-2{border-style: solid;}
.testimonials-slider-wrap .ClientRating .swiper-slide {
    max-width: 360px;
    min-width: 360px;
}
.card-border {
    border-radius: var(--border-radius-md);
    border: 1px solid;
    padding: 20px;
}
.list-items-avatar-details>*:not(:last-child){
    border-bottom: 1px solid var(--gray-200);
    padding: 20px 0;
}
.list-items-avatar-details>*:first-child{
    padding: 0 0 20px;
}
.list-items-avatar-details>*:last-child{
    padding: 20px 0 0;
}

.list-items-avatar-details .avatar-sq.avatar-lg>i{font-size: 46px;}
.list-items-avatar-details .avatar-sq.avatar-lg>svg{
    width: 40px;
    height: 40px;
    stroke-width: 1.5px;
}
.bg-gradient{background: linear-gradient(270deg, #F5428C 0%, #F97316 100%) !important;}
.bg-gradient-gray-50{background: linear-gradient(180deg, var(--gray-50, #F9FAFB) 21.13%, rgba(255, 255, 255, 0.00) 64.51%);}

.rounded-badge{
    background-color: var(--primary-blue-100);
    color: var(--primary-blue-500);
    padding: 6px 12px;
    border-radius: 40px;
    font-size: var(--font-14);
    font-family:var(--Font-Face-Bold);
    display: inline-block;
    line-height: normal;
}
.rounded-badge.paragraph{
    font-size: var(--font-16);
    font-family: var(--Font-Face-Medium);
    color: var(--body-color);
}
.company-dtl .divider-vertical>*:not(:last-child) {
    margin: 0 20px 0 0;
    padding: 8px 20px 8px 0;
    position: relative;
}
.company-dtl .divider-vertical>*:not(:last-child)::after {
    position: absolute;
    right: -10px;
    margin: 0 10px;
}
.client-logo-border{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100px;
    border:2px solid var(--primary-blue-50);
    border-radius: var(--border-radius-sm);
}
.sing-stepper-bar{flex: 1 1 0;}
.sing-stepper-bar:last-child{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28px 50%);
}
.sing-stepper-bar:not(:last-child){
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}
.sing-stepper-bar:not(:first-child):not(:last-child) {
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%);
}
.sing-stepper-bar + .sing-stepper-bar{
    margin-left: calc(10px - 28px);
    padding-left: calc(20px + 28px);
}
.smart-features-tab .button-tab-pane.p-20{
    padding: 20px;
}
.smart-features-tab .button-tab-pane.active{
    background-color: var(--primary-blue-50) !important;
}
.smart-features-tab .button-tab-pane.active .avatar.bg-primary-blue-50{
    background-color: var(--bg-white) !important;
}
.smart-features-sub-cnt>.col-lg-5 {width: 38%;}
.smart-features-sub-cnt>.col-lg-7 {width: 62%;}
.smart-features-tab>.col-lg-3 {width: 20%;}
.smart-features-tab>.col-lg-9 {width: 80%;}
.divider-vertical.company-dtl>*:not(:last-child)::after{
    margin: 0 20px 0 10px;
}
.button-tabs-nav .button-tab-pane.bg-transparent.border-primary-blue-500::after{
    background: var(--primary-blue-500);
}
section.top-companies[data-background-color="bg-purple-900"]::before {
    background-color: var(--purple-900);
    height: calc(var(--companies-sec-height) - var(--client-logo-height) - var(--client-company-dtl-height)/1.2);
}
.gradient-background{
    background: linear-gradient(90deg, var(--pink-500) 20%, var(--orange-500) 80%);
}
.ind_dtl_card>*{
    width: 100%;
    max-width: 190px;
    /* min-height: 100px; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-header .btn-close {
    position: absolute;
    right: -11px;
    top: -11px;
    z-index: 99;
    background: transparent;
    margin: 0;
    padding: 0;
    outline: 0;
    opacity: 1;
    display: flex;
    box-shadow: none;
    justify-content: center;
    align-items: center;
        width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}
.Feature_TanPane .nav-link.active .avatar>img{
    filter: invert(1) brightness(100) contrast(100);
}
.Feature_TanPane .nav-link.active .avatar>svg.lucide{
    color: var(--text-white) !important;
}
.custom-popover{
    box-shadow: var(--shadow-md);
    padding: 24px;
    border-radius: var(--border-radius-lg);
    border: 0;
    min-width: max-content;
    max-width: 350px;
    z-index: 9999;
    margin: 6px 0 0 !important;
}
.custom-popover::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    margin: 30px auto;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #fff;
    top: -8px;
    right: 30px;
    margin: 0;
}
.roi-single-block{height: 100%;}
.roi-single-block>*{height: 100%;margin: 1px 0 0;}
.testi-company-dtl.gap-30 {
    gap: 40px !important;
}
.Ind_Single_TabPane .list-with-green-tick{
    gap: 20px;
}
.client-support-list-single-box .avatar.avatar-lg {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
}
.CTA_Fixed_Button {
  transform: translateY(100%);
  transition: transform 0.35s ease;
  z-index: 99;
  display: none;
}
.CTA_Fixed_Button.is-visible {
  transform: translateY(0);
}
/* .Event_TopBar_Dtl>p{
    width: calc(100% - 140px);
    text-align: center;
} */
.Event_TopBar{
    background-size: contain;   
    background-position: top center;
    background-repeat: no-repeat;
}
.Feature_TanPane .nav-link.active::after {
    animation: tabProgress var(--tab-progress-duration, 10s) linear forwards;
}
#VideoModal .vplayer video, 
#VideoModal .vplayer .vp-poster{
    object-fit: cover;
}
.integrated-hr-payroll-software-tab-header.tabs-edge-fade::before,
.integrated-hr-payroll-software-tab-header.tabs-edge-fade::after{
    background: linear-gradient(to left, var(--bg-white), transparent);
}
.CaseStudyThumbs.tabs-edge-navy-fade::after {
    background: linear-gradient(to left, var(--purple-900, var(--purple-900)), transparent);
}
.CaseStudyThumbs.tabs-edge-navy-fade::before {
    background: linear-gradient(to right, var(--purple-900, var(--purple-900)), transparent);
}
.our-customers-grid {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    --autoplay-delay: 5000ms;
}
.our-customers-single-block {
    flex: 1 1 0%;
    width: auto !important;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    opacity: 1;
    margin-right: 0;
    transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.our-customers-grid .vplayer .vp-poster {
    object-fit: cover;
}
.our-customers-grid .vp-bigplay,
.our-customers-grid .vp-controls {
    display: none !important;
}
.our-customers-grid .vplayer {
    min-height: 323px;
    /* padding: 0; */
    z-index: 9;
    position: relative;
    background-size: cover;
    background-position: center;
}
.our-customers-grid .vplayer::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    z-index: 9;
    width: 100%;
    height: 100%;
}
.our-customers-sub-dtl {
    position: absolute;
    padding: 24px;
    bottom: 0;
    left: 0;
    z-index: 99;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.slide-active .our-customers-sub-dtl{
    height: 100%;
}
.our-customers-grid .our-customers-single-block.slide-active {
    flex: 0 0 576px;
}
.our-customers-play {
    width: 44px;
    height: 44px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* border: 2px solid #fff; */
    border-radius: 100%;
    margin: 14px 0;
    position: relative;
    cursor: pointer;
}
.our-customers-play > svg.lucide {
    fill: #fff;
}
.our-customers-play:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.our-customers-podcast-dtl{
    display: none;
}
.slide-active .our-customers-podcast-dtl{
    display: block;
}
.play-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%) rotate(-90deg);
    pointer-events: none;
    overflow: visible;
}
.ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 2.5;
}
.ring-fill {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 163.36;
    stroke-dashoffset: 163.36;
}
.our-customers-single-block.slide-active .ring-fill.run {
    animation: ring-fill var(--autoplay-delay) linear forwards;
}
.ring-fill.paused {
    animation-play-state: paused !important;
}
@keyframes ring-fill {
    from {
        stroke-dashoffset: 163.36;
    }
    to {
        stroke-dashoffset: 0;
    }
}
.ring-fill.reset {
    animation: none !important;
    stroke-dashoffset: 163.36;
}


.our-customers-grid {
    --autoplay-delay: 8000ms;
    --slide-duration: 0.7s;
    --slide-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
.our-customers-grid .our-customers-single-block {
    flex: 1 1 0%;
    transition: flex-grow var(--slide-duration) var(--slide-ease);
    will-change: flex-grow;
}
.our-customers-grid .our-customers-single-block.slide-active {
    flex: 1 1 0%;
    flex-grow: 2.88;
}
.our-customers-grid .vplayer {
    background-color: #000;
}

.our-customers-grid .vplayer .vp-poster,
.our-customers-grid .vplayer video {
    object-fit: cover;
}
.our-customers-grid .vplayer .vplayer-media {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.our-customers-grid .vplayer .vplayer-media.is-playing {
    opacity: 1;
} 
.our-customers-grid .our-customers-sub-dtl {
    inset: 0;
    height: auto;
    justify-content: flex-end;
}
.our-customers-grid .our-customers-sub-dtl > img {
    flex: 0 0 auto;
    margin: 0 auto;
}
.our-customers-grid .slide-active .our-customers-sub-dtl > img{
    display: none;
}
.our-customers-spacer {
    display: block;
    width: 100%;
    flex: 0 1 0%;
    transition: flex-grow var(--slide-duration) var(--slide-ease);
}
.our-customers-grid .slide-active .our-customers-spacer {
    flex-grow: 1;
}
.our-customers-grid .our-customers-podcast-dtl {
    display: block;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(12px);
    pointer-events: none;
    transition:
        max-height var(--slide-duration) var(--slide-ease),
        opacity 0.4s ease,
        transform var(--slide-duration) var(--slide-ease);
}
.our-customers-grid .slide-active .our-customers-podcast-dtl {
    max-height: 260px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.our-customers-grid:hover .ring-fill,
.our-customers-single-block:hover .ring-fill,
.our-customers-grid .ring-fill.paused {
    animation-play-state: running;
}

/* ---------------- responsive ---------------- */
@media (max-width: 1199px) {
    .our-customers-grid {
        gap: 16px;
    }
    .our-customers-grid .vplayer {
        min-height: 227px;
    }
    .our-customers-grid .our-customers-single-block.slide-active {
        flex-grow: 2.4;
    }
    .our-customers-grid .our-customers-sub-dtl {
        padding: 20px;
    }
}

@media (max-width: 991px) {
    .our-customers-grid {
        flex-direction: column;
        gap: 16px;
        max-width: 560px;
        margin: auto;
    }
    .our-customers-grid .our-customers-single-block .vplayer {
        padding-bottom: 30%;
    }
    .our-customers-grid .our-customers-single-block.slide-active .vplayer {
        padding-bottom: 56.15%;
    }
    .our-customers-grid .our-customers-single-block {
        height: auto;
        min-height: 0;
        transition: flex-grow var(--slide-duration) var(--slide-ease);
    }
    .our-customers-grid .our-customers-single-block.slide-active {
        flex-grow: 1.75;
    }
    .our-customers-grid .vplayer {
        min-height: 0;
        height: 100%;
    }
    .our-customers-grid .vplayer .vp-poster, .our-customers-grid .vplayer video{object-position: top center;}
    .our-customers-play, .play-ring{width: 34px;height: 34px;}
}

@media (max-width: 767px) {
    .our-customers-grid .our-customers-single-block.slide-active {
        flex-grow: 1.75;
    }
    .our-customers-grid .our-customers-sub-dtl {
        padding: 16px;
    }
    .our-customers-grid .our-customers-podcast-dtl p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }
    .our-customers-grid .slide-active .our-customers-podcast-dtl {
        max-height: 200px;
    }
}
@media (max-width: 575px) {
    .our-customers-grid .our-customers-single-block.slide-active {
        flex-grow: 1.8;
    }
    .our-customers-grid .our-customers-play {
        margin: 10px 0;
    }
}
@media (max-width: 400px) {
    .our-customers-grid .our-customers-podcast-dtl p {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    .our-customers-grid .slide-active .our-customers-podcast-dtl {
        max-height: 170px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .our-customers-grid .our-customers-single-block,
    .our-customers-grid .our-customers-podcast-dtl,
    .our-customers-grid .vplayer .vplayer-media,
    .our-customers-spacer {
        transition-duration: 0.01ms;
    }
}