/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


@font-face {
  font-family: 'GroteskLight';
  src: url('/hubfs/raw_assets/public/DA_2026_Theme/fonts/OverusedGrotesk-Light.woff') format('woff'),
       url('/hubfs/raw_assets/public/DA_2026_Theme/fonts/OverusedGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GroteskBook';
  src: url('/hubfs/raw_assets/public/DA_2026_Theme/fonts/OverusedGrotesk-Book.woff') format('woff'),
       url('/hubfs/raw_assets/public/DA_2026_Theme/fonts/OverusedGrotesk-Book.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GroteskReg';
  src: url('/hubfs/raw_assets/public/DA_2026_Theme/fonts/OverusedGrotesk-Roman.woff') format('woff'),
       url('/hubfs/raw_assets/public/DA_2026_Theme/fonts/OverusedGrotesk-Roman.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GroteskMed';
  src: url('/hubfs/raw_assets/public/DA_2026_Theme/fonts/OverusedGrotesk-Medium.woff') format('woff'),
       url('/hubfs/raw_assets/public/DA_2026_Theme/fonts/OverusedGrotesk-Medium.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GroteskBold';
  src: url('/hubfs/raw_assets/public/DA_2026_Theme/fonts/OverusedGrotesk-SemiBold.woff') format('woff'),
       url('/hubfs/raw_assets/public/DA_2026_Theme/fonts/OverusedGrotesk-SemiBold.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}





:root {
    --da-black: #0E0E0E;
    --da-black-rgb: 14,14,14;
    --da-light-blue: #A3CFFC;
    --da-yellow: #F2F9A9;
    --da-dark-gray: #838383;
    --da-dark-gray-rgb: 131,131,131;
    --da-light-gray: #D5D5D5;
    --da-light-gray-rgb: 237,238,234;
    --da-white: #fff;
    --da-offwhite: #f9faf5;
    --da-offwhite-rgb: 249,250,245;
}

/* Base Overrides */

h1,
h1 p,
h2,
h2 p,
h3,
h3 p,
h4,
h4 p {
    font-family: "GroteskBook";
    font-weight: 600;
    color: var(--da-black);
}

.da-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--da-white);
}

.da-dot-white {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--da-white);
}


.da-dot-black {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--da-black);
}

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

.btn {
    padding-right: 12px;   
}

.btn:after {
    content: '';
    margin-left: 5px;
    display: inline-block;
    width: 12px;
    height: 9px;
    background-image: url("https://www.canton.network/hubfs/raw_assets/public/DA_2026_Theme/images/black-btn-arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;   
}

.btn:hover:after {
    background-image: url("https://www.canton.network/hubfs/raw_assets/public/DA_2026_Theme/images/white-btn-arrow.svg");
}

.cta-module .cta-area .btn:hover:after {
    background-image: url("https://www.canton.network/hubfs/raw_assets/public/DA_2026_Theme/images/black-btn-arrow.svg");
}

.btn.btn-dark{
    color: var(--da-offwhite);
    border-radius: 100px;
    border: 0.5px solid rgba(249, 250, 245, 0.25);
    background: rgba(249, 250, 245, 0.10);
}

.btn.btn-dark:hover {
    border: 0.5px solid rgba(var(--da-offwhite-rgb), .5);
    background: rgba(249, 250, 245, 0.25);
    color: var(--da-offwhite);
}

.btn.btn-dark:after {
    background-image: url("https://www.canton.network/hubfs/raw_assets/public/DA_2026_Theme/images/white-btn-arrow.svg");
}

.btn.btn-dark:hover:after {
    background-image: url("https://www.canton.network/hubfs/raw_assets/public/DA_2026_Theme/images/white-btn-arrow.svg");
}

.bg-offwhite {
    background-color: var(--da-offwhite);   
}

.accordion-module h2 {
    margin-bottom: 0px;   
}

.accordion-module h2 strong {
    color: var(--da-yellow);
    font-weight: 500;
}

.accordion-module.simple-accordion .accordion .accordion-item,
.accordion-module.side-accordion .accordion .accordion-item {
    border-left: 0;
    border-right: 0;
    border-bottom: 0.75px solid var(--da-dark-gray);
}

.accordion-module.standard-accordion.bg-dark .accordion .accordion-item .accordion-header .accordion-button{
    border-bottom: 0.5px solid var(--da-dark-gray);
    background-color: transparent;
}

.accordion-module.simple-accordion .accordion .accordion-item .accordion-button.collapsed,
.accordion-module. .accordion .accordion-item h2 {
     font-family: 'GroteskLight';
}

.accordion-module.simple-accordion .accordion .accordion-item .accordion-button.collapsed {
    color: var(--da-black);     
}

/* Dark Accordion */

.accordion-module.bg-dark h2,
.accordion-module.bg-dark .accordion .accordion-item .accordion-button,
.accordion-module.bg-dark .accordion .accordion-item .accordion-button.collapsed,
.accordion-module.bg-dark.side-accordion .accordion .accordion-item .accordion-button,
.accordion-module.bg-dark .content p,
.accordion-module.bg-dark .accordion .accordion-item .accordion-body
{
    color: var(--da-white);   
}




/* Marketo Forms */

.mktoForm {
    font-family: Inter !important;
    font-size: 14px !important;
    font-weight: 200 !important;
    max-width: 100%;
    border: 0;
    margin: 0px auto;
    display: block;
    border-radius: 8px;
    background: linear-gradient(0deg, #EDEEEA 0%, #EDEEEA 100%), #FFF;
    padding: 35px !important;
    z-index: 10;
    position: relative;
}

.mktoForm .mktoGutter,
.mktoForm .mktoOffset {
    display: none !important;
}

.mktoForm .mktoFormCol {
   
}

.mktoForm .mktoFormRow {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 767px){ 
    .mktoForm .mktoFormRow {
        display: block;
    }
}

.mktoForm .mktoFormRow .mktoRequiredField .mktoAsterix {
    float: right !important;   
    color: #333;
}

.mktoForm .mktoFieldDescriptor {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
}

.mktoForm .mktoFieldDescriptor:first-of-type {
    padding-left: 0;   
}

@media (max-width: 767px){ 
    .mktoForm .mktoFieldDescriptor {
        padding-left: 0;   
    }
}

.mktoForm .mktoFieldWrap {
    width: 100% !important;
    float: none !important;
}

.mktoForm .mktoLabel {
    font-family: Inter !important;
    float: none !important;
    width: auto !important;
    font-weight: bold;
}

.mktoForm input,
.mktoForm textarea,
.mktoForm select {
    outline: none !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 10px 10px !important;
    border: 0 !important;
    border-radius: 5px !important;
}

.mktoForm textarea {
    min-height: 100px !important;   
}

.mktoForm .mktoCheckboxList {
    width: 100% !important;
}

.mktoForm .mktoCheckboxList label {
    font-weight: 400 !important;
}

.mktoForm input[type="checkbox"],
.mktoForm input[type="radio"] {
    width: 20px !important;
    margin-right: 10px !important;
    margin-top: -12px !important;
    accent-color: #122067 !important;
}

.mktoForm .mktoHtmlText {
    width: 100% !important;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
}

.mktoForm .mktoHtmlText a {
    color: #122167 !important;
    text-decoration: underline !important;
}

.mktoForm .mktoButtonWrap {
    margin-left: 0 !important;
}

.mktoForm .mktoButton {
      padding: 12px 24px !important;
      justify-content: center !important;
      align-items: center !important;
      border-radius: 100px !important;
      border: 0px solid rgba(var(--da-offwhite-rgb), .5) !important;
      background: var(--da-light-blue) !important;
      color: var(--da-black) !important;
      font-family: "GroteskMed" !important;
      font-optical-sizing: auto; !important
      font-style: normal !important;
      font-variation-settings: "slnt" 0 !important;
      font-size: 1.4rem !important;
      transition: 0.2s all ease-in-out !important;
}

.mktoForm .mktoButton:hover {
     background-color: var(--da-black) !important;
      color: var(--da-white) !important;
}




.stats-columns-module .stat-box .info-icon svg {
    fill: #0d216b;
}

.consent-placeholder {
    display: block;
    position: relative;
    text-align: center;
    z-index: 95;
    border-radius: 10px;
    background-color: #f9f9f9;
}
.consent-placeholder .placeholder-content {
    position: absolute;
    left: auto;
    right: auto;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
    
}