/* 1a. Containers */


  



  


/* 1b. Colors */







/* 1c. Typography */





























/* 1d. Buttons */






























/* 1e. Forms */































/* 1f. Icons */
















/* 1g. Cards */











/* 1h. Tables */













/* 1i. Website header */



























/* 1j. Website footer */










:root {
  --white: #fff;
  --black: #000;

  --grey: #ddd;
  --light-grey: #F5F5F5;

  --text-color: #1E023C;

  --primary-purple: #08084F;
  --secondary-purple: #1E003C;

  --blue: #7300AD;
  --yellow: #FFDB00;
  --orange: #FF8C00;
  --pink: #FA0096;
  --red: #FF0000;

  --light-purple: #EFEFF9;
  --light-blue: #5ECCFF;

  --light: 300;
  --regular: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
}

/* CAI Global Variable */
:root {
  --color-primary: #0067A0;
  --color-secondary: #0085CA;
  --color-accent: #003E51;
  --color-light: #f5f5f5;
  --color-light-gray: #e8e8eb;
  --color-dark-gray: #6b7280;
  --color-white: #ffffff;
  --color-text: #0f0f0f;
  --color-text-secondary: #25282A;
  --color-text-gray: #7E7E82;
  --color-text-gray-2: #C1C1BE;
  --color-text-light: #ffffff; 
  --color-text-subtitle: #7E7E82;
  --color-border: #ffffff;
  --color-azure-50: #0085CA;
  --color-primary-50: #e5eef4;
  --color-primary-400: #005886;
  --spacing: 16px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 14px;
  --spacing-lg: 36px;
  --spacing-xl: 42px;
  --border-radius: 8px;
  --border-radius-lg: 10px;
  --transition-duration: 200ms;
  --transition-timing: ease-in-out;
  --icon-size-sm: 12px;
  --icon-size: 16px;
  --icon-size-l: 22px;
  --icon-size-xl: 24px;
  --icon-size-xxl: 32px;
  --container-max-width: 1416px;
  --color-hover-light: #B8E2F5;   /* for text/icons on primary bg → lighten */
  --color-hover-dark: var(--color-primary-400); /* for filled buttons → darken */

  --link-color: var(--color-secondary);
  --link-hover-color: var(--section-text-color);

    /* Typography */
  --section-heading-color: var(--color-text-secondary);
  --section-text-color: var(--color-text-secondary);
  --font-family-base: "arial", sans-serif;
  --font-size-tag: 12px;
  --font-size-para-default: 16px;
  --font-size-para-large: 18px;

  --pargraph-font-size: var(--font-size-para-large);
  --pargraph-line-height: 1.5;
  --pargraph-spacing: 20px;
}

.light {
  --section-heading-color: var(--color-text-secondary);
  --section-text-color: var(--color-text-secondary);
  --link-hover-color: var(--section-text-color);
}

.light-gray {
  /* background-color: var(--color-light-gray); */
}

.dark {
  --section-heading-color: #FFFFFF;
  --section-text-color: #FFFFFF;
  --link-hover-color: var(--color-hover-light);
  /* background-color: var(--color-accent); */
}

@media (max-width: 1024px) {
  :root {
    --spacing-lg: 16px;
    --spacing-xl: 20px;
  }
}
/* END CAI Global Variable */






/* Drag and drop layout styles */

.dnd-section {
  padding: 80px 35px;
  position: relative;
}

@media (max-width: 767px) {
  .dnd-section {
    padding: 80px 16px;
  }
}

/* Padding on blog post sections */

.blog-post-section {
  padding: 80px 0;
}

/* .content-wrapper is used for blog post and system templates and .header-wrapper is used for the website header module */

.dnd-section > .row-fluid,
.content-wrapper,
.header__wrapper {
  max-width: 1234px;
}





html {
  font-size: 16px;
}

body {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  background-color: #ffffff;
  color: var(--section-text-color);
  font-size: var(--font-size-para-large);
}

/* Paragraphs */

p {
  font-size: var(--font-size-para-large);
  line-height: var(--pargraph-line-height);
  margin: 0 0 var(--pargraph-spacing);
  font-weight: 400;
  color: var(--section-text-color);
}

ul, ol {
  padding-left: 8px;
}

ul li, ol li {
  margin: 0 0 0 0.7rem;
  line-height: var(--pargraph-line-height);
}

ul li::marker {
  font-size: 13px;
}

/* Anchors */

a, .link-style {
  color: var(--link-color);
  transition: color var(--transition-duration) var(--transition-timing);
  font-weight: 400; text-decoration: underline; font-family: arial, sans-serif; font-style: normal;
}

a:hover,
a:focus {
  font-weight: 400; text-decoration: underline; font-family: arial, sans-serif; font-style: normal;
  color: var(--link-hover-color);
}

a:active {
  font-weight: 400; text-decoration: underline; font-family: arial, sans-serif; font-style: normal;
  color: var(--link-hover-color);
}

.dark p,
.dark a,
.dark li,
.dark blockquote {
  color: var(--section-text-color);
}

.dark a:not(.button):hover,
.dark a:not(.button):active,
.dark a:not(.button):focus {
  color: var(--link-hover-color);
}

.bg-blue {
  background-color: var(--color-primary);
  overflow: hidden;
}

.bg-dark {
  background-color: var(--color-accent);
  overflow: hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6, .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 {
  line-height: 1;
  color: var(--section-heading-color);
  margin: 0 0 20px;
}


h1, .heading-1 {
  line-height: 110.00000000000001%;
  font-family: var(--font-family-base);
  font-weight: 900;
  font-style: normal;
  font-size: 52px;
  text-transform: none;
  margin: 0 0 32px;
  letter-spacing: -0.04em;
}

h2, .heading-2 {
  line-height: 120%;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 40px;
  text-transform: none;
}

h3, .heading-3 {
  line-height: 120%;
  font-size: 32px;
  font-weight: 700;
  font-family: arial, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  font-size: 28px;
  text-transform: none;
}

h4, .heading-4 {
  line-height: 120%;
  font-size: 24px;
  font-weight: 700;
  font-family: arial, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  text-transform: none;
}

h5, .heading-5 {
  line-height: 120%;
  font-size: 20px;
  text-transform: none;
}

h6, .heading-6 {
  font-family: arial, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  font-size: 16px;
  text-transform: none;
}

@media screen and (max-width: 992px) {
  h1, .heading-1 { font-size: 44px; }
  h2, .heading-2 { font-size: 34px; }
  h3, .heading-3 { font-size: 28px; }
  h4, .heading-4 { font-size: 22px; }
  body, p { font-size: var(--font-size-para-default); }
}

@media screen and (max-width: 576px) {
  h1, .heading-1 { font-size: 34px; margin: 0 0 20px; }
  h2, .heading-2 { font-size: 28px; }
  h3, .heading-3 { font-size: 24px; }
  h4, .heading-4 { font-size: 20px; }
}

.heading {
  color: var(--section-heading-color);
  margin: 0 0 20px;
}

.subtitle {
  color: var(--section-heading-color);
  margin: 0 0 12px;
}

.section-text {
  color: var(--section-text-color);
  margin: 0 0 1.5rem 0;
}

/* If the content is the last element inside the text column */
.column-text > .section-text:last-child, .column-text > .heading:last-child {
  margin-bottom: 0;
}

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

/* Blockquotes */

blockquote {
  line-height: var(--pargraph-line-height);
  font-family: arial, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  border-left-color: #1E003C;
  color: #231f20;
  font-size: 24px;
}

blockquote > footer {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  font-size: 16px;
}

/* Horizontal rules */

hr {
  border-bottom-color: #7300AD;
}

.tag {
  font-size: var(--font-size-tag);
  line-height: 150%;
  color: var(--color-secondary);
  font-weight: 700;
}





/* Form */

form {
  border: 1px none #1E003C;

  padding: 45px;

  background-color: 

  
  
    
  


  rgba(30, 0, 60, 1.0)

;
  border-radius: 0px;
}

/* Form title */

.form-title {
  border: 1px none #08084F;

  padding: 25px;

  font-family: arial, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  background-color: 

  
  
    
  


  rgba(8, 8, 79, 1.0)

;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  color: #ffffff;
  font-size: 28px;
  text-transform: ;
}

/* Labels */

form label {
  padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;

  font-family: arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  color: #231f20;
  font-size: 16px;
}

/* Help text */

form legend {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #231f20;
  font-size: 14px;
}

/* Form fields */

form input[type='text'],
form input[type='email'],
form input[type='password'],
form input[type='tel'],
form input[type='number'],
form input[type='search'],
form select,
form textarea {
  border: 1px none #7300AD;

  padding: 10px;

  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  border-radius: 0px;
  color: #231f20;
  font-size: 16px;
  
}

/* Form fields - placeholders */

::-webkit-input-placeholder {
  color: #7300AD;
  font-weight: var(--medium);
}

::-moz-placeholder {
  color: #7300AD;
  font-weight: var(--medium);
}

:-ms-input-placeholder {
  color: #7300AD;
  font-weight: var(--medium);
}

:-moz-placeholder {
  color: #7300AD;
  font-weight: var(--medium);
}

::placeholder {
  color: #7300AD;
  font-weight: var(--medium);
}

/* Form fields - date picker */

form .hs-dateinput:before {
  right: 10px;
}

form .pika-table thead th {
  background-color: 

  
  
    
  


  rgba(8, 8, 79, 1.0)

;
  color: #ffffff;
}

form td.is-today .pika-button {
  color: #231f20;
}

form .is-selected .pika-button {
  background-color: #1E003C;
  color: #231f20;
}

form .pika-button:hover {
  background-color: #08084F !important;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext *,
form .hs-richtext p,
form .hs-richtext h1,
form .hs-richtext h2,
form .hs-richtext h3,
form .hs-richtext h4,
form .hs-richtext h5,
form .hs-richtext h6 {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #231f20;
}

form .hs-richtext a {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #231f20;
}

/* GDPR */

form .legal-consent-container,
form .legal-consent-container .hs-richtext,
form .legal-consent-container .hs-richtext p {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #231f20;
  font-size: 14px;
}

/* Inline thank you message */

.submitted-message {
  border: 1px none #1E003C;

  padding: 45px;

  background-color: 

  
  
    
  


  rgba(30, 0, 60, 1.0)

;
  border-radius: 0px;
}





/* Default icon (regular/dark) */

.icon {
  padding: 15px;

  background-color: 

  
  
    
  


  rgba(99, 99, 199, 1.0)

;
}

.icon svg {
  fill: #ffffff;
  height: 16px;
  width: 16px;
}

/* Light icon */

.icon--light .icon {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

.icon--light svg {
  fill: #6363C7;
}

/* Size */

.icon--small svg {
  height: 12px;
  width: 12px;
}

.icon--small .icon {
  padding: 10px;

}

.icon--large svg {
  height: 24px;
  width: 24px;
}

.icon--large .icon {
  padding: 25px;

}





/* Table */

table {
  border: 1px solid #7300AD;

  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

/* Table cells */

th,
td {
  border: 1px solid #7300AD;

  padding: 10px;

  color: #231f20;
}

/* Table header */

thead th,
thead td {
  background-color: 

  
  
    
  


  rgba(8, 8, 79, 1.0)

;
  color: #ffffff;
}

/* Table footer */

tfoot th,
tfoot td {
  background-color: 

  
  
    
  


  rgba(30, 0, 60, 1.0)

;
  color: #231f20;
}





/* Header container */

.header {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

/* Header content color */

.header p,
.header h1,
.header h2,
.header h3,
.header h4,
.header h5,
.header h6,
.header a:not(.button),
.header span,
.header div,
.header li,
.header blockquote,
.header .tabs__tab,
.header .tabs__tab:hover,
.header .tabs__tab:focus,
.header .tabs__tab:active {
  color: #231f20;
}

/* Header top bar */

.header__top {
  background-color: 

  
  
    
  


  rgba(30, 0, 60, 1.0)

;
}

/* Language switcher */

.header__language-switcher-current-label > span {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #231f20;
  font-size: 16px;
  text-transform: none;
  font-weight: var(--medium);
}
.header__language-switcher-current-label > span:hover {
  font-weight: var(--medium);
}

.header__language-switcher:hover .header__language-switcher-current-label > span,
.header__language-switcher:focus .header__language-switcher-current-label > span {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #000000;
}

.header__language-switcher-child-toggle svg {
  fill: #231f20;
}

/* Language switcher - submenu */

.header__language-switcher .lang_list_class {
  border-color: #7300AD;
}

.header__language-switcher .lang_list_class li {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

.header__language-switcher .lang_list_class a:not(.button) {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #231f20;
  font-size: 16px;
  text-transform: none;
}

.header__language-switcher .lang_list_class a:hover,
.header__language-switcher .lang_list_class a:focus {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  color: #000000;
}

.header__language-switcher .lang_list_class a:active {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

/* Header bottom */

.header__bottom {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

/* Logo */

.header__logo-company-name {
  font-family: arial, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #231f20;
  font-size: 40px;
  text-transform: none;
}

/* Menu */

@media (max-width: 767px) {
  .header__menu--mobile {
    background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  }
}

/* Menu items */

.header__menu-link {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  font-size: 16px;
  text-transform: none;
}

@media (max-width: 767px) {
  .header__menu-item--depth-1 {
    border-top: 1px solid #7300AD;
  }
}

/* Menu items - top level */

.header__menu-item--depth-1 > .header__menu-link:not(.button) {
  color: #231f20;
}

.header__menu-item--depth-1 > .header__menu-link:hover,
.header__menu-item--depth-1 > .header__menu-link:focus {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #000000;
}

.header__menu-item--depth-1 > .header__menu-link:active {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #505050;
}

.header__menu-item--depth-1 > .header__menu-link--active-link:not(.button) {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #000000;
}

.header__menu-item--depth-1 .header__menu-child-toggle svg {
  fill: #231f20;
}

/* Menu items - submenus */

.header__menu-submenu {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  border-color: #7300AD;
}

.header__menu-submenu .header__menu-link:not(.button) {
  color: #231f20;
}

.header__menu-submenu .header__menu-item:hover,
.header__menu-submenu .header__menu-item:focus {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

.header__menu-submenu .header__menu-link:hover,
.header__menu-submenu .header__menu-link:focus {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
  color: #000000;
}

.header__menu-submenu .header__menu-link:active {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

.header__menu-submenu .header__menu-link--active-link:not(.button) {
  color: ;
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

/* Menu icons */

.header__menu-toggle svg {
  fill: var(--white);
}





/* Footer container */

.footer {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

/* Footer content color */

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer p,
.footer a:not(.button),
.footer span,
.footer div,
.footer li,
.footer blockquote,
.footer .tabs__tab,
.footer .tabs__tab:hover,
.footer .tabs__tab:focus,
.footer .tabs__tab:active {
  color: #231f20;
}

.footer hr {
  border-bottom-color: #231f20 !important;
}

/* Footer menu */

.footer .hs-menu-wrapper a {
  font-family: arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  color: #231f20;
  font-size: 16px;
  text-transform: none;
}

.footer .hs-menu-wrapper a:hover,
.footer .hs-menu-wrapper a:focus {
  font-family: arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  color: #000000;
}

.footer .hs-menu-wrapper a:active {
  font-family: arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  color: #505050;
}

.footer .hs-menu-wrapper .active > a {
  font-weight: bold; text-decoration: underline; font-family: arial, sans-serif; font-style: normal;
  color: #000000;
}






/* Dark card */

.card--dark {
  border: 1px solid #231f20;

  background-color: 

  
  
    
  


  rgba(35, 31, 32, 1.0)

;
  border-radius: 0px;
  color: #ffffff;
}

.card--dark summary,
.card--dark p,
.card--dark h1,
.card--dark h2,
.card--dark h3,
.card--dark h4,
.card--dark h5,
.card--dark h6,
.card--dark a:not(.button),
.card--dark span,
.card--dark div,
.card--dark li,
.card--dark blockquote {
  color: #ffffff;
}

/* Light card */

.card--light {
  border: 1px solid #7300AD;

  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  border-radius: 0px;
  color: #231f20;
}

.card--light summary,
.card--light p,
.card--light h1,
.card--light h2,
.card--light h3,
.card--light h4,
.card--light h5,
.card--light h6,
.card--light a:not(.button),
.card--light span,
.card--light div,
.card--light li,
.card--light blockquote {
  color: #231f20;
}





/* Error templates */

.error-page:before {
  font-family: arial, sans-serif; font-style: normal; font-weight: 400; text-decoration: none;
}

/* System templates */

#email-prefs-form,
#email-prefs-form h1,
#email-prefs-form h2 {
  color: #231f20;
}

/* Search template */

.hs-search-results__title {
  font-size: 32px;
}

/* Backup unsubscribe template */

.backup-unsubscribe input[type='email'] {
  font-size: 16px !important;
  padding: padding: 10px;
 !important;
}





/* Accordion */

.accordion__summary,
.accordion__summary:before {
  font-family: arial, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  font-size: 24px;
}

.card--dark .accordion__summary:before {
  color: #ffffff;
}

.card--light .accordion__summary:before {
  color: #231f20;
}

/* Blog listing, recent posts, related posts, and blog post */

.blog-listing__post-title {
  text-transform: none;
}

.blog-listing__post-title-link {
  font-family: arial, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #231f20;
}

.blog-listing__post-title-link:hover,
.blog-listing__post-title-link:focus {
  font-family: arial, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #000000;
}

.blog-listing__post-title-link:active {
  font-family: arial, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #736f70;
}

.blog-listing__post-tag {
  color: var(--color-secondary);
}

.blog-listing__post-tag:hover,
.blog-listing__post-tag:focus {
  color: #000000;
}

.blog-listing__post-tag:active {
  color: #736f70;
}

.blog-listing__post-author-name,
.blog-post__author-name {
  color: #231f20;
}

.blog-listing__post-author-name :hover,
.blog-listing__post-author-name :focus,
.blog-post__author-name:hover,
.blog-post__author-name:focus {
  color: #000000;
}

.blog-listing__post-author-name :active,
.blog-post__author-name:active {
  color: #736f70;
}

/* Image gallery */

.image-gallery__close-button-icon:hover,
.image-gallery__close-button-icon:focus {
  background-color: rgba(19, 19, 119, 1.0);
}

.image-gallery__close-button-icon:active {
  background-color: rgba(179, 179, 255, 1.0);
}

.icon--light .image-gallery__close-button-icon:hover,
.icon--light .image-gallery__close-button-icon:focus {
  background-color: rgba(175, 175, 175, 1.0);
}

.icon--light .image-gallery__close-button-icon:active {
  background-color: rgba(255, 255, 255, 1.0);
}

/* Pagination */

.pagination__link-icon svg {
  fill: #08084F;
  height: 16px;
  width: 16px;
}

.pagination__link:hover .pagination__link-icon svg,
.pagination__link:focus .pagination__link-icon svg {
  fill: #415239;
}

.pagination__link:active .pagination__link-icon svg {
  fill: #58589f;
}

.pagination__link--active {
  border-color: #7300AD
}

/* Pricing card */

.pricing-card__heading {
  background-color: #08084F;
}

/* Social follow and social sharing */

.social-follow__icon:hover,
.social-follow__icon:focus,
.social-sharing__icon:hover,
.social-sharing__icon:focus {
  background-color: rgba(19, 19, 119, 1.0);
}

.social-follow__icon:active,
.social-sharing__icon:active {
  background-color: rgba(179, 179, 255, 1.0);
}

.icon--light .social-follow__icon:hover,
.icon--light .social-follow__icon:focus,
.icon--light .social-sharing__icon:hover,
.icon--light .social-sharing__icon:focus {
  background-color: rgba(175, 175, 175, 1.0);
}

.icon--light .social-follow__icon:active,
.icon--light .social-sharing__icon:active {
  background-color: rgba(255, 255, 255, 1.0);
}

/* Tabs */

.tabs__tab,
.tabs__tab:hover,
.tabs__tab:focus,
.tabs__tab:active {
  border-color: #231f20;
  color: #231f20;
}






/* Global Setting Buttons */
:root {
  --button-padding: 12px 24px;
  --button-padding-large: 14.5px 32px;
  --button-padding-xl: 18.5px 34px;
  --button-radius: 8px;
  --button-font-weight: 700;
  --button-spacing: 32px;
  --button-font-size: var(--font-size-para-default);
}
.button-wrapper-clue {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: var(--button-spacing);
}

.button-wrapper-clue.align-left { justify-content: flex-start; }
.button-wrapper-clue.align-center { justify-content: center; }
.button-wrapper-clue.align-right { justify-content: flex-end; }

.button, .hs-button {
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    transition: background-color var(--transition-duration) var(--transition-timing),
            border-color var(--transition-duration) var(--transition-timing),
            color var(--transition-duration) var(--transition-timing);
    text-decoration: none;
    font-weight: var(--button-font-weight);
    border: solid;
    border-width: 2px;
    line-height: var(--pargraph-line-height);
    font-size: var(--button-font-size);
}
.button:hover, 
.button:active, 
.button:focus, 
.hs-button:hover,
.hs-button:focus,
.hs-button:active {
    text-decoration: none;
    font-weight: var(--button-font-weight);
}

.button.lg {
  padding: var(--button-padding-large);
}

.button.xl {
  padding: var(--button-padding-xl);
}

.button.button--primary {
  background-color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  color: var(--color-white);
}
.button.button--primary:hover {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.dark .button.button--primary:hover {
  background-color: var(--color-white);
  color: var(--color-secondary);
  border-color: var(--color-white);
}
.button.button--primary.br {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.button.button--primary.br:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}
.button.button--secondary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
}
.button.button--secondary:hover {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.dark .button.button--secondary:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}
.button.button--dark {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}
.button.button--dark.br {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.button.button--dark:hover,
.button.button--dark:active,
.button.button--dark:focus {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.button.button--dark.br:hover,
.button.button--dark.br:active,
.button.button--dark.br:focus {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}
@media (max-width: 768px) {
    .button-wrapper-clue {
        flex-direction: column;
        margin-top: 20px;
    }
}
/* END Global Setting Buttons */
/* Shared Pagination */

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 72px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: ;
  list-style: none;
}

.pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 2px solid #ECEAE9;
  border-radius: 8px;
  background: #fff;
  color: #C1C1BE;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
}

.pagination-item:hover,
.pagination-item.active {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: #fff;
}

.pagination-item.disabled,
.pagination-item:disabled {
  border-color: #ECEAE9;
  background: #F5F5F5;
  color: #C1C1BE;
  cursor: default;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .pagination-container {
    margin-top: 48px;
  }
}

/* END Shared Pagination */
/* GLOBAL STYLING MAIN */
:root {
  --space-p-before-list: 0.7rem;
}

p:has(+ ul) {
  margin-bottom: var(--space-p-before-list);
}

/* GLOBAL NEW STYLE */
/* Utility classes */
.text-xxl, .text-xxl.heading {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
}
.text-xl, .text-xl.heading {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
}

.text-l, .text-l.heading, .text-l p {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.45;
}

.text-ml, .text-ml.heading, .text-ml p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}

.text-m, .text-m.heading {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

/* ===== Mobile (up to 768px) ===== */
@media (max-width: 768px) {
  /* Utility classes */
  .text-xxl, .text-xxl.heading {
    font-size: 22px;
  }

  .text-xl, .text-xl.heading {
    font-size: 20px;
  }

  .text-l, .text-l.heading, .text-l p, .text-ml, .text-ml.heading, .text-ml p {
    font-size: 18px;
  }

  .text-m, .text-m.heading {
    font-size: 16px;
  }
}

p:last-child, ul:last-child {
  margin-bottom: 0;
}

o {
  color: #6363c7;
  font-style: italic;
}

mark {
  background: none !important;
  color: var(--color-secondary) !important;
}

/* Global Spacing Scale */
:root {
    --spacing-s: 20px;
    --spacing-m: 40px;
    --spacing-l: 60px;
    --spacing-xl: 80px;
    --spacing-s-sm: 10px;
    --spacing-m-sm: 20px;
    --spacing-l-sm: 40px;
    --spacing-xl-sm: 60px;
}

/* Padding - Top */
.pt-s { padding-top: var(--spacing-s); }
.pt-m { padding-top: var(--spacing-m); }
.pt-l { padding-top: var(--spacing-l); }
.pt-xl { padding-top: var(--spacing-xl); }

/* Padding - Bottom */
.pb-s { padding-bottom: var(--spacing-s); }
.pb-m { padding-bottom: var(--spacing-m); }
.pb-l { padding-bottom: var(--spacing-l); }
.pb-xl { padding-bottom: var(--spacing-xl); }

/* Margin - Top */
.mt-s { margin-top: var(--spacing-s); }
.mt-m { margin-top: var(--spacing-m); }
.mt-l { margin-top: var(--spacing-l); }
.mt-xl { margin-top: var(--spacing-xl); }

/* Margin - Bottom */
.mb-s { margin-bottom: var(--spacing-s); }
.mb-m { margin-bottom: var(--spacing-m); }
.mb-l { margin-bottom: var(--spacing-l); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* Gap */
.gap-s { gap: var(--spacing-s); }
.gap-m { gap: var(--spacing-m); }
.gap-l { gap: var(--spacing-l); }
.gap-xl { gap: var(--spacing-xl); }

#main-content .dnd-section{
    padding: var(--spacing-xl) 35px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
  /* Padding - Top */
  .pt-s:not(.spacing-static) { padding-top: var(--spacing-s-sm); }
  .pt-m:not(.spacing-static) { padding-top: var(--spacing-m-sm); }
  .pt-l:not(.spacing-static) { padding-top: var(--spacing-l-sm); }
  .pt-xl:not(.spacing-static) { padding-top: var(--spacing-xl-sm); }

  /* Padding - Bottom */
  .pb-s:not(.spacing-static) { padding-bottom: var(--spacing-s-sm); }
  .pb-m:not(.spacing-static) { padding-bottom: var(--spacing-m-sm); }
  .pb-l:not(.spacing-static) { padding-bottom: var(--spacing-l-sm); }
  .pb-xl:not(.spacing-static) { padding-bottom: var(--spacing-xl-sm); }

  /* Margin - Top */
  .mt-s:not(.spacing-static) { margin-top: var(--spacing-s-sm); }
  .mt-m:not(.spacing-static) { margin-top: var(--spacing-m-sm); }
  .mt-l:not(.spacing-static) { margin-top: var(--spacing-l-sm); }
  .mt-xl:not(.spacing-static) { margin-top: var(--spacing-xl-sm); }

  /* Margin - Bottom */
  .mb-s:not(.spacing-static) { margin-bottom: var(--spacing-s-sm); }
  .mb-m:not(.spacing-static) { margin-bottom: var(--spacing-m-sm); }
  .mb-l:not(.spacing-static) { margin-bottom: var(--spacing-l-sm); }
  .mb-xl:not(.spacing-static) { margin-bottom: var(--spacing-xl-sm); }

  /* Gap */
  .gap-s { gap: var(--spacing-s-sm); }
  .gap-m { gap: var(--spacing-m-sm); }
  .gap-l { gap: var(--spacing-l-sm); }
  .gap-xl { gap: var(--spacing-xl-sm); }

    #main-content .dnd-section{
        padding: var(--spacing-xl-sm) 16px;
        position: relative;
    }
}

/* END Global Spacing Scale */

/* Container Setting */
.dnd-section > .row-fluid, .content-wrapper, .header__wrapper {
    max-width: 1372px;
}
/* End Container Setting */

/* Landing Page Footer Styling */
@media (max-width: 768px) {
  /* remove watermark in mobile */
  .footer-no-navigation-clue{
    background-image: none;
  }
  .footer-no-navigation-clue .social-follow, .footer-no-navigation-clue .widget-type-rich_text{
    text-align: center !important;
  }
}
/* End Landing Page Footer Styling */

/* Other */
/* #purechat-container {
    display: none;
} */

.quote {
  font-size: 28px;
  font-weight: 600 !important;
  line-height: 1.4;
}
.quote + p, .quote + p + p {
  margin-bottom: 0;
}
.quote + p b, .quote + p strong {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 32px;
}
.quote + p + p {
  font-size: 16px;
  line-height: 170%;
  letter-spacing: 1%;
}

@media (max-width: 768px) {
  .quote {
    font-size: 22px;
  }

  .quote + p b, .quote + p strong {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 28px;
  }
}

/* Wistia */
.wistia_responsive_padding {
  border-radius: 8px;
  overflow: hidden;
}




/* START CAI PATTERN */
.pattern-1 {
  position: relative;
  overflow: visible;
  z-index: 0;
}

.pattern-1::after {
  content: "";
  position: absolute;

  width: 390px;
  height: 365px;

  top: -80px;
  right: -250px;

  background-image: url("https://27116883.fs1.hubspotusercontent-eu1.net/hubfs/27116883/01.%20Website/12.%20CAI%20Rebranding/pattern1.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 390px 365px;

  pointer-events: none;
  z-index: 0;
}

.pattern-1 > * {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .pattern-1::after {
    width: 380px;
    height: 356px;

    top: -70px;
    right: -240px;

    background-size: 380px 356px;
    background-position: right center;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .pattern-1::after {
    width: 390px;
    height: 365px;

    top: -60px;
    right: -255px;

    background-size: 390px 365px;
    background-position: right center;
  }
}

@media screen and (max-width: 479px) {
  .pattern-1::after {
    width: 365px;
    height: 342px;

    top: -55px;
    right: -240px;

    background-size: 365px 342px;
    background-position: right center;
  }
}

/* Pattern 2 */
.pattern-2 {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.pattern-2::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("https://27116883.fs1.hubspotusercontent-eu1.net/hubfs/27116883/01.%20Website/12.%20CAI%20Rebranding/patter-2.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto;

  pointer-events: none;
  z-index: 0;
}

.pattern-2 > * {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .pattern-2::after {
    background-image: url("https://27116883.fs1.hubspotusercontent-eu1.net/hubfs/27116883/01.%20Website/12.%20CAI%20Rebranding/patter-2-mobile.svg");
    /* background-size: 45% auto; */
    background-position: calc(100% + 20px) top;
    background-size: 155px auto;
  }
}

/* Pattern 3 */
.dnd-section:has(.pattern-3) {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.dnd-section:has(.pattern-3)::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("https://27116883.fs1.hubspotusercontent-eu1.net/hubfs/27116883/01.%20Website/12.%20CAI%20Rebranding/patter-3.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto;

  pointer-events: none;
  z-index: 0;
}

.dnd-section:has(.pattern-3) > * {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .dnd-section:has(.pattern-3)::after {
    background-size: 165px auto;
  }
}

/* Pattern 4 */
.pattern-4 {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.pattern-4::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("https://27116883.fs1.hubspotusercontent-eu1.net/hubfs/27116883/01.%20Website/12.%20CAI%20Rebranding/patter-4.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto;

  pointer-events: none;
  z-index: 0;
}

.pattern-4 > * {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .pattern-4::after {
    background-image: url("https://27116883.fs1.hubspotusercontent-eu1.net/hubfs/27116883/01.%20Website/12.%20CAI%20Rebranding/patter-2-mobile.svg");
    background-position: calc(100% + 20px) top;
    background-size: 155px auto;
  }
}

/* Pattern 5 */
.pattern-5 {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.pattern-5::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("https://27116883.fs1.hubspotusercontent-eu1.net/hubfs/27116883/01.%20Website/12.%20CAI%20Rebranding/patter-5.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto;

  pointer-events: none;
  z-index: 0;
}

.pattern-5 > * {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .pattern-5::after {
    background-size: 155px auto;
  }
}

/* Pattern 7 */
.pattern-7 {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.pattern-7::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("https://27116883.fs1.hubspotusercontent-eu1.net/hubfs/27116883/01.%20Website/12.%20CAI%20Rebranding/pattern-7.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto;

  pointer-events: none;
  z-index: 0;
}

.pattern-7 > * {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .pattern-7::after {
    background-size: 450px auto;
    background-position: right -315px top;
  }
}

/* END CAI PATTERN */

.hs-video-widget {
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0px 10px 20px 0px #00000033;
}

.vjs-hubspot .simple-play-button {
  width: 90px;
  height: 90px;
  background-color: #0000004D;
}
/* Pattern 6 */

#main-content .dnd-section:has(.pattern-6) {
  position: relative;
  overflow: visible;
}

#main-content .dnd-section:has(.pattern-6)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  width: min(61.375vw, 982px);
  aspect-ratio: 982 / 700.38;

  background-image: url("https://27116883.fs1.hubspotusercontent-eu1.net/hubfs/27116883/Group%201.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;

  pointer-events: none;
  z-index: 2;
}

#main-content .dnd-section:has(.pattern-6) > .row-fluid {
  position: relative;
  z-index: 3;
}

#main-content:has(.pattern-6) .featured-webinar {
  position: relative;
  z-index: 3;
}


/* Compact desktop */

@media screen and (min-width: 1200px) and (max-width: 1439px) {
  #main-content .dnd-section:has(.pattern-6)::after {
    width: 100%;
    max-width: none;
    height: var(--pattern-6-responsive-height);
    aspect-ratio: auto;

    background-size: 75vw auto;
    background-position: calc(100% + 48vw) top;
    background-repeat: repeat-y;
  }
}


/* Tablet */

@media screen and (min-width: 768px) and (max-width: 1199px) {
  #main-content .dnd-section:has(.pattern-6)::after {
    width: 100%;
    max-width: none;
    height: var(--pattern-6-responsive-height);
    aspect-ratio: auto;

    background-size: 82vw auto;
    background-position: calc(100% + 52vw) top;
    background-repeat: repeat-y;
  }
}


/* Mobile */

@media screen and (max-width: 767px) {
  #main-content .dnd-section:has(.pattern-6)::after {
    width: 100%;
    max-width: none;
    height: var(--pattern-6-responsive-height);
    aspect-ratio: auto;

    background-size: 110vw auto;
    background-position: calc(100% + 74vw) top;
    background-repeat: repeat-y;
  }
}

/*****************************************/
/* STYLING FOR GLOBAL FORM */
/*****************************************/

.hubspot-form {
  --input-border-radius: 8px;

  --field-padding: 13.5px 16px;

  --form-field-gap: 21px;

  --section-text-color: var(--color-text-secondary);

  --link-hover-color: var(--section-text-color);

  --field-text-size: var(--pargraph-font-size);
  --field-text-color: var(--section-text-color);
  --label-text-color: var(--section-text-color);

}

/* STYLING FOR GLOBAL FORM v.1 */
.error-message {
  margin-top: 4px;
  margin-bottom: 8px;
  color: #dc3545;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  max-height: 0;
  overflow: hidden;
}

.error-message.show {
  opacity: 1;
  transform: translateY(0);
  max-height: 50px;
}

.hubspot-form {
  width: 100%;
  box-sizing: border-box;
  margin: 0px auto;
}

.hubspot-form h2 {
  color: #1f2937;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 12px;
  text-align: center;
}

.hubspot-form .row {
  margin-bottom: var(--form-field-gap);
  display: flex;
  flex-direction: column;
}
.hubspot-form .row.last, .hubspot-form > .row:nth-last-of-type(3) {
  margin-bottom: var(--form-field-gap);
}
.hubspot-form .check-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}
.hubspot-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--label-text-color);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  padding: 0;
  cursor: pointer;
}
.hubspot-form label p {
  margin: 0 !important;
}
.hubspot-form .check-row label {
  margin-bottom: 0px;
  line-height: 1.3;
}

/* Subscribe Field */
.hubspot-form .subscribe {
  margin-top: 0;
}

.hubspot-form .subscribe label {
  display: flex;
  gap: 8px;
  align-items: start;
  justify-content: center;
  margin-bottom: 0;
  text-align: center;
}

.hubspot-form .subscribe label #subscribe_checkbox {
  margin-top: 2px;
}
/* End Subscribe Field */

/* Footer */
.hubspot-form .form-footer {
  text-align: center;
  color: var(--label-text-color);
}
.hubspot-form .form-footer a {
  cursor: pointer;
}
/* End Footer */

.hubspot-form input[type="text"],
.hubspot-form input[type="email"],
.hubspot-form input[type="tel"],
.hubspot-form input[type="number"],
.hubspot-form select,
.hubspot-form textarea {
  width: 100%;
  padding: var(--field-padding);
  border: 1px solid #CFCFCF !important;
  border-radius: var(--input-border-radius);
  font-size: var(--field-text-size);
  line-height: var(--pargraph-line-height);
  color: var(--section-text-color);
  box-sizing: border-box;
  transition: all 0.2s ease;
  background-color: #ffffff;
}

.hubspot-form input[type="text"]:focus,
.hubspot-form input[type="email"]:focus,
.hubspot-form input[type="tel"]:focus,
.hubspot-form input[type="number"]:focus,
.hubspot-form select:focus,
.hubspot-form textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

.hubspot-form input[type="text"]::placeholder,
.hubspot-form input[type="email"]::placeholder,
.hubspot-form input[type="tel"]::placeholder,
.hubspot-form input[type="number"]::placeholder,
.hubspot-form select::placeholder,
.hubspot-form textarea::placeholder {
  color: #8A8A8A;
}

/* Custom select for country */


.hubspot-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* Radio and checkbox styles */
.hubspot-form input[type="radio"],
.hubspot-form input[type="checkbox"] {
  width: auto;
  vertical-align: middle;
  margin: 0;
}

.hubspot-form input[type="checkbox"] {
  min-width: 24px;
  min-height: 24px;
  appearance: none;          /* remove default OS style */
  -webkit-appearance: none;  /* Safari */
  -moz-appearance: none;     /* Firefox */
  border: 2px solid #CFCFCF; /* custom border */
  border-radius: 4px;        /* optional, for rounded corners */
  background: #fff;
  cursor: pointer;
  position: relative;
}

/* Custom checkmark when checked */
.hubspot-form input[type="checkbox"]:checked::after {
  content: "✔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px; /* size of the checkmark */
  color: #1f2937;
}

.hubspot-form label.radio-checkbox-group {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 500;
}

.hubspot-form input[type="submit"] {
  width: 100%;
  margin-top: 26px;
  line-height: 1;
}

/* Style 1 */
.hubspot-form.style-1 {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin: 0px auto;
}
.hubspot-form.style-1 a {
    color: var(--link-color);
    text-decoration: none;
}
.hubspot-form.style-1 a:hover {
    color: var(--link-hover-color);
}

.hubspot-form.style-1 .button.button--primary:hover {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* Style 2 */
.hubspot-form.style-2 {
  background: transparent;
  padding: 0;
  border: none;

  --field-padding: 10px;
  --field-text-size: 18px;
  --input-border-radius: 2px;
  --label-text-color: #ffffff;
}

.hubspot-form.style-2 input[type=submit] {
  border-radius: 50px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hubspot-form, .hubspot-form.style-1{
    padding: 24px;
    margin: 0px;
  }

  .hubspot-form h2 {
    font-size: 22px;
    margin-bottom: 18px;
  }

  .hubspot-form label {
    font-size: 14px;
    margin-bottom: 14px;
  }

  .hubspot-form input[type="text"],
  .hubspot-form input[type="email"],
  .hubspot-form input[type="tel"],
  .hubspot-form input[type="number"],
  .hubspot-form select,
  .hubspot-form textarea {
    font-size: 18px;
    padding: 10px 12px;
  }

  .hubspot-form input[type="submit"] {
    font-size: 18px;
    padding: 12px 20px;
  }
  .hubspot-form .check-row{
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .hubspot-form, .hubspot-form.style-1 {
    padding: 20px;
    border-radius: 10px;
  }

  .hubspot-form h2 {
    font-size: 20px;
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  .hubspot-form label {
    margin-bottom: 12px;
  }

  .hubspot-form input[type="text"],
  .hubspot-form input[type="email"],
  .hubspot-form input[type="tel"],
  .hubspot-form input[type="number"],
  .hubspot-form select,
  .hubspot-form textarea {
    padding: 10px;
  }

  .hubspot-form input[type="submit"] {
    padding: 12px 18px;
  }
}

/* New stylable country/dropdown select */
.hubspot-form .country-select-wrapper, .hubspot-form .product-select-wrapper, .hubspot-form .dropdown-select-wrapper {
  position: relative;
}

.hubspot-form .country-trigger, .hubspot-form .product-trigger, .hubspot-form .dropdown-trigger {
  width: 100%;
  text-align: left;
  padding: var(--field-padding);
  border: 1px solid #CFCFCF !important;
  border-radius: var(--input-border-radius);
  font-size: var(--field-text-size);
  line-height: var(--pargraph-line-height);
  color: var(--section-text-color);
  background-color: #ffffff;
  box-sizing: border-box;
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: 500;
  justify-content: flex-start;
}

.hubspot-form .country-trigger:focus, .hubspot-form .product-trigger:focus, .hubspot-form .dropdown-trigger:focus {
  border-color: #3b82f6 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

/* Hidden by default; shown when wrapper has .open */
.hubspot-form .country-options, .hubspot-form .product-options, .hubspot-form .dropdown-options {
  position: absolute;
  top: calc(100% + 8px); /* small gap below the trigger */
  left: 0;
  right: 0;
  max-height: 280px;
  overflow: auto;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: var(--input-border-radius);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06);
  z-index: 20;
  display: none;
}

.hubspot-form .country-select-wrapper.open .country-options, .hubspot-form .product-select-wrapper.open .product-options, .hubspot-form .dropdown-select-wrapper.open .dropdown-options {
  display: block;
}

.hubspot-form .country-option, .hubspot-form .product-option, .hubspot-form .dropdown-option {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 18px;
  color: #1f2937;
  cursor: pointer;
  margin: 8px 0;
}

.hubspot-form .country-option:hover,
.hubspot-form .country-option:focus,
.hubspot-form .product-option:hover,
.hubspot-form .product-option:focus,
.hubspot-form .dropdown-option:hover,
.hubspot-form .dropdown-option:focus{
  background-color: #F3F4F6; /* subtle hover/focus */
  outline: none;
}

.hubspot-form .country-option[aria-selected="true"], .hubspot-form .product-option[aria-selected="true"], .hubspot-form .dropdown-option[aria-selected="true"] {
  background-color: #EFF6FF; /* selected */
  color: #1e40af;
}

/* Responsive fine-tuning to match your global inputs */
@media (max-width: 768px) {
  .hubspot-form .country-trigger, .hubspot-form .product-trigger, .hubspot-form .dropdown-trigger {
    font-size: 18px;
    padding: 10px 12px;
  }
  .hubspot-form .country-option, .hubspot-form .product-option, .hubspot-form .dropdown-option {
    font-size: 16px;
    padding: 10px;
  }
}

/*****************************************/
/* END STYLING FOR GLOBAL FORM */
/*****************************************/

/* Custom-styled native select (base-select) */
select.select--custom {
  appearance: base-select;
  align-items: center;
}

select.select--custom::picker-icon {
  display: none;
}

select.select--custom option::checkmark {
  display: none;
}

select.select--custom::picker(select) {
  appearance: base-select;
  width: anchor-size(width);
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0;
  background: #fff;
  margin-top: 8px;
  margin-bottom: 8px;
}

select.select--custom option {
  white-space: normal;
  padding: 10px 24px;
}

select.select--custom option:hover {
  background: #aee0f5;
}