:root {
    /* Font Sizes */

    /* Root Font Size */
    --base-fs: 16px;

    /* h1 */
    --h1-fs: calc(2.5 * var(--base-fs));
      
    /* h2 */
    --h2-fs: calc(2 * var(--base-fs));
      
    /* h3 */
    --h3-fs: calc(1.5 * var(--base-fs));
      
    /* h4 */
    --h4-fs: calc(1.125 * var(--base-fs));
      
    /* h5 */
    --h5-fs: calc(1 * var(--base-fs));
      
    /* p1 */
    --p1-fs: calc(1.125 * var(--base-fs));
      
    /* p2 */
    --p2-fs: calc(0.875 * var(--base-fs));
      
    /* Accent 1 */
    --accent-1-fs: calc(1.125 * var(--base-fs));

    /* Accent 2 */
    --accent-2-fs: calc(0.875 * var(--base-fs));
    
    /* Link 1 */
    --link-1-fs: calc(1.125 * var(--base-fs));
    
    /* Link 2 */
    --link-2-fs: calc(0.875 * var(--base-fs));
}
@media screen and (min-width: 768) {
    :root {
        /* Font Sizes 769+ */
        
        /* h1 */
        --h1-fs: calc(3.375 * var(--base-fs));
        
        /* h2 */
        --h2-fs: calc(2.5 * var(--base-fs));
    }
}
:root {
    /* Typography */
    
    /* Font Family 1 */

    --ff-1: Helvetica, Arial, sans-serif;

    /* Font Weights */
    
    --fw-100: 100;
    --fw-150: 150;
    --fw-200: 200;
    --fw-250: 250;
    --fw-300: 300;
    --fw-350: 350;
    --fw-400: 400;
    --fw-450: 450;
    --fw-500: 500;
    --fw-550: 550;
    --fw-600: 600;
    --fw-650: 650;
    --fw-700: 700;
    --fw-750: 750;
    --fw-800: 800;
    --fw-850: 850;
    --fw-900: 900;
    
      
    /* h1 */
    --h1-lh: calc(1.2 * var(--h1-fs));
    --h1-font: var(--fw-500) var(--h1-fs)/var(--h1-lh) var(--ff-1);
    --h1-ls: normal;
      
    /* h2 */
    --h2-lh: calc(1 * var(--h2-fs));
    --h2-font: var(--fw-500) var(--h2-fs)/var(--h2-lh) var(--ff-1);
    --h2-ls: normal;
      
    /* h3 */
    --h3-lh: calc(1.2 * var(--h3-fs));
    --h3-font: var(--fw-500) var(--h3-fs)/var(--h3-lh) var(--ff-1);
    --h3-ls: normal;
      
    /* h4 */
    --h4-lh: calc(1.2 * var(--h4-fs));
    --h4-font: var(--fw-400) var(--h4-fs)/var(--h4-lh) var(--ff-1);
    --h4-ls: normal;
      
    /* h5 */
    --h5-lh: calc(1.2 * var(--h5-fs));
    --h5-font: var(--fw-500) var(--h5-fs)/var(--h5-lh) var(--ff-1);
    --h5-ls: normal;
      
    /* p1 */
    --p1-lh: calc(1.5 * var(--p1-fs));
    --p1-font: var(--fw-400) var(--p1-fs)/var(--p1-lh) var(--ff-1);
    --p1-ls: normal;
      
    /* p2 */
    --p2-lh: calc(1.5 * var(--p2-fs));
    --p2-font: var(--fw-400) var(--p2-fs)/var(--p2-lh) var(--ff-1);
    --p2-ls: normal;
      
    /* Accent 1 */
    --accent-1-lh: calc(1.4 * var(--accent-1-fs));
    --accent-1-font: var(--fw-500) var(--accent-1-fs)/var(--accent-1-lh) var(--ff-1);
    --accent-1-ls: normal;

    /* Accent 2 */
    --accent-2-lh: calc(1.5 * var(--accent-2-fs));
    --accent-2-font: var(--fw-500) var(--accent-2-fs)/var(--accent-2-lh) var(--ff-1);
    --accent-2-ls: normal;
    
    /* Link 1 */
    --link-1-lh: 1.5;
    --link-1-font: var(--fw-400) var(--link-1-fs)/var(--link-1-lh) var(--ff-1);
    --link-1-ls: normal;  
    
    /* Link 2 */
    --link-2-lh: 1.5;
    --link-2-font: var(--fw-400) var(--link-2-fs)/var(--link-2-lh) var(--ff-1);
    --link-2-ls: normal;  
    
    /* Colors */
    --color-primary: #1EABB3;
    --color-primary-subtle: #E6F7F8;
    --color-secondary: #EFF5F6;
    --color-secondary-subtle: #F2F2F2;
    --color-dark: #000;
    --color-dark-subtle: #00000080;
    --color-light: #FFF;
    --color-light-subtle: #FFFFFF80;

    /* Box Shadow */
    --box-shadow: 0px 2px 20px 0px #1EABB31A;

}

/* Website Layout */

.nav-link.btn.xover-btn-dark {
    color: var(--bs-btn-color) !important;
}

body {
    background-color: var(--color-light);
}

.xover-navbar {
    position: sticky;
    top: 0;
    background-color: var(--color-light);
    color: var(--color-dark);
    z-index: 1060;
    box-shadow: var(--box-shadow);
}
.xover-navbar .nav-item {
    font: var(--p1-font);
    font-size: var(--base-fs) !important;
    letter-spacing: var(--p1-ls);
    align-content: center;
}
.xover-navbar .nav-item .btn {
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
}

.xover-footer {
    background-color: var(--color-secondary);
    color: var(--color-dark);
}
.xover-footer .copyright {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}

.xover-footer svg {
    height: 1em;
    width: 1em;
}

.title.h1 {
    font: var(--h1-font) !important;
    letter-spacing: var(--h1-ls) !important;
}

/* Buttons */

.btn[class*="xover-btn-"] {
    --bs-btn-border-radius: 1px;
}


.btn.xover-btn-primary {
    --bs-btn-color: var(--color-light) !important;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary) !important;
    --bs-btn-hover-bg: var(--color-primary-subtle);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: var(--color-dark);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-dark);
    --bs-btn-disabled-color: var(--color-light);
    --bs-btn-disabled-bg: var(--color-primary-subtle);
    --bs-btn-disabled-border-color: var(--color-primary-subtle);
}
.xover-btn-primary:visited {
    color: var(--color-light) !important;
}
.xover-btn-primary:hover {
    color: var(--color-primary) !important;
}
.btn.xover-btn-outline-primary {
    --bs-btn-color: var(--color-primary) !important;
    --bs-btn-bg: var(--color-light);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-subtle);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: var(--color-dark);
    --bs-btn-active-bg: var(--color-light);
    --bs-btn-active-border-color: var(--color-dark);
    --bs-btn-disabled-color: var(--color-primary-subtle);
    --bs-btn-disabled-bg: var(--color-light);
    --bs-btn-disabled-border-color: var(--color-primary-subtle);
}
.xover-btn-outline-primary:visited {
    color: var(--color-primary) !important;
}
.xover-btn-outline-primary:hover {
    color: var(--color-primary) !important;
}


.btn.xover-btn-secondary {
    --bs-btn-color: var(--color-light) !important;
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-color: var(--color-light);
    --bs-btn-hover-bg: var(--color-secondary-subtle);
    --bs-btn-hover-border-color: var(--color-secondary-subtle);
    --bs-btn-active-color: var(--color-dark);
    --bs-btn-active-bg: var(--color-secondary);
    --bs-btn-active-border-color: var(--color-dark);
    --bs-btn-disabled-color: var(--color-light);
    --bs-btn-disabled-bg: var(--color-secondary-subtle);
    --bs-btn-disabled-border-color: var(--color-secondary-subtle);
}
.xover-btn-secondary:visited {
    color: var(--color-light);
}
.xover-btn-secondary:hover {
    color: var(--color-primary);
}
.btn.xover-btn-outline-secondary {
    --bs-btn-color: var(--color-secondary) !important;
    --bs-btn-bg: var(--color-light);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-color: var(--color-secondary);
    --bs-btn-hover-bg: var(--color-secondary-subtle);
    --bs-btn-hover-border-color: var(--color-secondary);
    --bs-btn-active-color: var(--color-dark);
    --bs-btn-active-bg: var(--color-light);
    --bs-btn-active-border-color: var(--color-dark);
    --bs-btn-disabled-color: var(--color-secondary-subtle);
    --bs-btn-disabled-bg: var(--color-light);
    --bs-btn-disabled-border-color: var(--color-secondary-subtle);
}
.xover-btn-outline-secondary:visited {
    color: var(--color-secondary);
}
.xover-btn-outline-secondary:hover {
    color: var(--color-secondary);
}


.btn.xover-btn-dark {
    --bs-btn-color: var(--color-light) !important;
    --bs-btn-bg: var(--color-dark);
    --bs-btn-border-color: var(--color-dark);
    --bs-btn-hover-color: var(--color-light);
    --bs-btn-hover-bg: var(--color-dark-subtle);
    --bs-btn-hover-border-color: var(--color-dark-subtle);
    --bs-btn-active-color: var(--color-dark);
    --bs-btn-active-bg: var(--color-dark);
    --bs-btn-active-border-color: var(--color-dark);
    --bs-btn-disabled-color: var(--color-light);
    --bs-btn-disabled-bg: var(--color-dark-subtle);
    --bs-btn-disabled-border-color: var(--color-dark-subtle);
}
.xover-btn-dark:visited {
    color: var(--color-light);
}
.xover-btn-dark:hover {
    color: var(--color-primary);
}
.btn.xover-btn-outline-dark {
    --bs-btn-color: var(--color-dark) !important;
    --bs-btn-bg: var(--color-light);
    --bs-btn-border-color: var(--color-dark);
    --bs-btn-hover-color: var(--color-dark);
    --bs-btn-hover-bg: var(--color-dark-subtle);
    --bs-btn-hover-border-color: var(--color-dark);
    --bs-btn-active-color: var(--color-dark);
    --bs-btn-active-bg: var(--color-light);
    --bs-btn-active-border-color: var(--color-dark);
    --bs-btn-disabled-color: var(--color-dark-subtle);
    --bs-btn-disabled-bg: var(--color-light);
    --bs-btn-disabled-border-color: var(--color-dark-subtle);
}
.xover-btn-outline-dark:visited {
    color: var(--color-dark);
}
.xover-btn-outline-dark:hover {
    color: var(--color-dark);
}

.btn.xover-btn-light {
    --bs-btn-color: var(--color-primary) !important;
    --bs-btn-bg: var(--color-light);
    --bs-btn-border-color: var(--color-light);
    --bs-btn-hover-color: var(--color-light);
    --bs-btn-hover-bg: var(--color-light-subtle);
    --bs-btn-hover-border-color: var(--color-light-subtle);
    --bs-btn-active-color: var(--color-dark);
    --bs-btn-active-bg: var(--color-light);
    --bs-btn-active-border-color: var(--color-dark);
    --bs-btn-disabled-color: var(--color-light);
    --bs-btn-disabled-bg: var(--color-light-subtle);
    --bs-btn-disabled-border-color: var(--color-light-subtle);
}
.xover-btn-light:visited {
    color: var(--color-light);
}
.xover-btn-light:hover {
    color: var(--color-primary);
}
.btn.xover-btn-outline-light {
    --bs-btn-color: var(--color-light) !important;
    --bs-btn-bg: var(--color-light);
    --bs-btn-border-color: var(--color-light);
    --bs-btn-hover-color: var(--color-light);
    --bs-btn-hover-bg: var(--color-light-subtle);
    --bs-btn-hover-border-color: var(--color-light);
    --bs-btn-active-color: var(--color-dark);
    --bs-btn-active-bg: var(--color-light);
    --bs-btn-active-border-color: var(--color-dark);
    --bs-btn-disabled-color: var(--color-light-subtle);
    --bs-btn-disabled-bg: var(--color-light);
    --bs-btn-disabled-border-color: var(--color-light-subtle);
}
.xover-btn-outline-light:visited {
    color: var(--color-primary);
}
.xover-btn-outline-light:hover {
    color: var(--color-primary);
}

/* Links */

.xover-link-1 {
    font: var(--link-1-font);
    letter-spacing: var(--link-1-ls);
    color: var(--color-primary);
}
.xover-link-1:hover {
    color: var(--color-primary) !important;
}
.xover-link-1:visited {
    color: var(--color-primary) !important;
}

.xover-link-2 {
    font: var(--link-2-font);
    letter-spacing: var(--link-2-ls);
    color: var(--color-primary);
}
.xover-link-2:hover {
    color: var(--color-primary) !important;
}
.xover-link-2:visited {
    color: var(--color-primary) !important;
}

.xover-link-light-1 {
    font: var(--link-1-font);
    letter-spacing: var(--link-1-ls);
    color: var(--color-light);
}
.xover-link-light-1:hover {
    color: var(--color-light) !important;
}
.xover-link-light-1:visited {
    color: var(--color-light) !important;
}

.xover-link-light-2 {
    font: var(--link-2-font);
    letter-spacing: var(--link-2-ls);
    color: var(--color-light);
}
.xover-link-light-2:hover {
    color: var(--color-light) !important;
}
.xover-link-light-2:visited {
    color: var(--color-light) !important;
}

/* Color Utilities */

.xover-text-primary {
    color: var(--color-primary) !important;
}
.xover-text-primary-subtle {
    color: var(--color-primary-subtle) !important;
}
.xover-text-secondary {
    color: var(--color-secondary) !important;
}
.xover-text-secondary-subtle {
    color: var(--color-secondary-subtle) !important;
}
.xover-text-dark {
    color: var(--color-dark) !important;
}
.xover-text-light {
    color: var(--color-light) !important;
}

.xover-bg-primary {
    background-color: var(--color-primary) !important;
}
.xover-bg-secondary {
    background-color: var(--color-secondary) !important;
}
.xover-bg-primary-subtle {
    background-color: var(--color-primary-subtle) !important;
}
.xover-bg-secondary-subtle {
    background-color: var(--color-secondary-subtle) !important;
}
.xover-bg-dark {
    background-color: var(--color-dark) !important;
}
.xover-bg-light {
    background-color: var(--color-light) !important;
}

.xover-border-primary {
    --bs-border-color: var(--color-primary) !important;
}
.xover-border-primary-subtle {
    --bs-border-color: var(--color-primary-subtle) !important;
}
.xover-border-secondary {
    --bs-border-color: var(--color-secondary) !important;
}
.xover-border-secondary-subtle {
    --bs-border-color: var(--color-secondary-subtle) !important;
}
.xover-border-dark {
    --bs-border-color: var(--color-dark) !important;
}
.xover-border-light {
    --bs-border-color: var(--color-light) !important;
}

/*  Truncate */

/* ===== Base truncation styles ===== */
[class*="truncate-"] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== XS (default) ===== */
.truncate-1 { -webkit-line-clamp: 1; }
.truncate-2 { -webkit-line-clamp: 2; }
.truncate-3 { -webkit-line-clamp: 3; }
.truncate-4 { -webkit-line-clamp: 4; }
.truncate-5 { -webkit-line-clamp: 5; }

/* ===== SM and up (≥576px) ===== */
@media (min-width: 576px) {
    .truncate-sm-1 { -webkit-line-clamp: 1; }
    .truncate-sm-2 { -webkit-line-clamp: 2; }
    .truncate-sm-3 { -webkit-line-clamp: 3; }
    .truncate-sm-4 { -webkit-line-clamp: 4; }
    .truncate-sm-5 { -webkit-line-clamp: 5; }
}

/* ===== MD and up (≥768px) ===== */
@media (min-width: 768px) {
    .truncate-md-1 { -webkit-line-clamp: 1; }
    .truncate-md-2 { -webkit-line-clamp: 2; }
    .truncate-md-3 { -webkit-line-clamp: 3; }
    .truncate-md-4 { -webkit-line-clamp: 4; }
    .truncate-md-5 { -webkit-line-clamp: 5; }
}

/* ===== LG and up (≥992px) ===== */
@media (min-width: 992px) {
    .truncate-lg-1 { -webkit-line-clamp: 1; }
    .truncate-lg-2 { -webkit-line-clamp: 2; }
    .truncate-lg-3 { -webkit-line-clamp: 3; }
    .truncate-lg-4 { -webkit-line-clamp: 4; }
    .truncate-lg-5 { -webkit-line-clamp: 5; }
}

/* ===== XL and up (≥1200px) ===== */
@media (min-width: 1200px) {
    .truncate-xl-1 { -webkit-line-clamp: 1; }
    .truncate-xl-2 { -webkit-line-clamp: 2; }
    .truncate-xl-3 { -webkit-line-clamp: 3; }
    .truncate-xl-4 { -webkit-line-clamp: 4; }
    .truncate-xl-5 { -webkit-line-clamp: 5; }
}

/* ===== XXL and up (≥1400px) ===== */
@media (min-width: 1400px) {
    .truncate-xxl-1 { -webkit-line-clamp: 1; }
    .truncate-xxl-2 { -webkit-line-clamp: 2; }
    .truncate-xxl-3 { -webkit-line-clamp: 3; }
    .truncate-xxl-4 { -webkit-line-clamp: 4; }
    .truncate-xxl-5 { -webkit-line-clamp: 5; }
}

/* Alert */

.xover-alert {
    --bs-alert-bg: var(--color-secondary);
    --bs-alert-margin-bottom: 0px;
    --bs-alert-color: var(--color-primary);
    --bs-alert-border-color: var(--color-primary);
    --bs-alert-border: 1px solid var(--color-primary);
    --bs-alert-border-radius: 1px;
}
.xover-alert.success {
    --bs-alert-bg: var(--color-secondary);
    --bs-alert-margin-bottom: 0px;
    --bs-alert-color: var(--color-primary);
    --bs-alert-border-color: var(--color-primary);
    --bs-alert-border: 1px solid var(--color-primary);
    --bs-alert-border-radius: 1px;
}
.xover-alert.danger {
    --bs-alert-bg: var(--color-secondary);
    --bs-alert-margin-bottom: 0px;
    --bs-alert-color: var(--color-primary);
    --bs-alert-border-color: var(--color-primary);
    --bs-alert-border: 1px solid var(--color-primary);
    --bs-alert-border-radius: 1px;
}

/* SVGs */
.svg-16px {
    height: 16px;
    width: 16px;
}
.svg-20px {
    height: 20px;
    width: 20px;
}
.svg-24px {
    height: 24px;
    width: 24px;
}

/* Hover Dropdown */

/* Show dropdown on hover */
.dropdown.nav-item:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* remove the jump */
}


/* Hero Section */
.hero-container {
    margin-top: 48px;
    margin-bottom: 48px;
}
@media screen and (min-width: 768px) {
    .hero-container {
        margin-top: 72px;
    }    
}
.hero .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.hero .subtitle {
    font: var(--accent-2-font);
    letter-spacing: var(--accent-2-ls);
}
.hero .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.hero img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}
.hero .form-control {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    padding: 4px 8px;
}
.hero .form-control::placeholder {
    color: var(--color-primary);
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.hero input[type="file"]::file-selector-button {
    background-color: var(--color-primary);
    color: #fff;
} 

/* Typing Cursor Animation */

.type-span {
  border-right: 1px solid black;   /* typing cursor */
  padding-right: 1px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 50% { border-color: black; }
  51%, 100% { border-color: transparent; }
}

/* Rolling Numbers Animation */

.number-animate {
  display: inline-flex;
  overflow: hidden;
  font-family: monospace !important;
  font: var(--h2-font);
  letter-spacing: var(--h2-ls);
  height: var(--h2-lh);
}

.rolling-digit {
  display: flex;
  flex-direction: column;
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  height: var(--h2-lh);
}

.rolling-digit span {
  height: var(--h2-lh);
  line-height: var(--h2-lh);
  display: block;
}

/* Subhero */
.sub_hero-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .sub_hero-container {
        margin-block: 72px;
    }    
}

.sub_hero .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.sub_hero .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.sub_hero img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.sub_hero .subtitle {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.sub_hero .content-title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
}
.sub_hero .content-data {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}


/* Testimonials Section */
.testimonials {
    background-color: var(--color-secondary);
    color: var(--color-dark);
}
.testimonials-container {
    padding-block: 48px;
}
.testimonials .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.testimonials .description {
    font: var(--p1-font);
    letter-spacing: var(--accent-p1-ls);
}
.testimonials .content-title {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.testimonials .content-subtitle {
    font: var(--p2-font);
    letter-spacing: var(--accent-p2-ls);
}
.testimonials .content-data {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}
.testimonials img {
    height: 48px;
    width: auto;
    max-width: 50%;
    object-fit: contain;
}
.testimonials svg {
    height: 48px;
    width: 48px;
}

/* Accordion */

.xover-accordion svg {
    height: 24px;
    width: 24px;
}

/* Card hover animation */

.card.hover:hover {
    box-shadow: var(--box-shadow);
}

/* Detail Section */
.detail img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-primary-subtle);
}

.detail .card svg {
    height: 24px;
    width: 24px;
    flex-shrink: 0;
}

/* People Section */
.people .card img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-primary-subtle);
}
.people .connect-btn {
    display: block;
    height: 36px;
    width: 36px;
    flex-shrink: 0;
}

.people .connect-btn {
    display: block;
    height: 100%;
    width: 100%;
}

/* Columns Section */

@media screen and (min-width: 1200px) {
    .columns .column.has-content-data {
        min-height: 208px;
    }        
}
.columns-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .columns-container {
        margin-block: 72px;
    }    
}
.columns .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.columns .description {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.columns .content-title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
    text-wrap: wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.columns .content-img {
    width: 33%;
    height: auto;
}
.columns .content-data {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}
.columns .content-data.accent {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}

/* Icons Cards sections */

.icon_cards-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .icon_cards-container {
        margin-top: 72px;
    }    
}
.icon_cards .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.icon_cards .description {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.icon_cards .content-title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
    text-wrap: wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.icon_cards .content-img {
    width: 33%;
    height: auto;
}
.icon_cards .content-data {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}
.icon_cards .content-data.accent {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}

/* Icons Cards 2 sections */

.icon_cards_2-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .icon_cards_2-container {
        margin-top: 72px;
    }    
}
.icon_cards_2 .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.icon_cards_2 .description {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.icon_cards_2 .content-title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
    text-wrap: wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.icon_cards_2 .content-img {
    width: 33%;
    height: auto;
}
.icon_cards_2 .content-data {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}
.icon_cards_2 .content-data.accent {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}

/* Media Section */

.media-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .media-container {
        margin-top: 72px;
    }    
}

.media .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.media .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background-color: var(--color-dark-subtle);
}

/* Media Cards Section */

.media_cards-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .medi_cards-container {
        margin-top: 72px;
    }    
}

.media_cards .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.media_cards .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.media_cards .content-img {
    width: 100%;
    aspect-ratio: 1;
    display: block;
    background-color: var(--color-dark-subtle);
    object-fit: cover;
}
.media_cards .content-title {
    font: var(--accent-1-font);
    font-weight: var(--fw-550);
    letter-spacing: var(--accent-1-ls);
}
.media_cards .content-data {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}

/* Services Section */
.services-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .services-container {
        margin-block: 72px;
    }    
}
.services .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.services .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.services .card .accent {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.services .card .title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
}
.services .card .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.services .card .link {
    font: var(--link-1-font);
    letter-spacing: var(--link-1-ls);
    width: max-content;
}
.services .card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Approach Section */
.approach-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .approach-container {
        margin-block: 72px;
    }    
}

.approach .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.approach .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.approach .accent {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}

/* Comparison Section */

.comparison-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .comparison-container {
        margin-block: 72px;
    }    
}

.comparison .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.comparison .description {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.comparison .description .price {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
}
.comparison .description .price-suffix {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}

.comparison .content-title {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
    display: flex;
    justify-content: space-between;
}
.comparison .content-negative,
.comparison .content-positive {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}

/* Grid Section */

.grid-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .grid-container {
        margin-block: 72px;
    }    
}

.grid .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.grid .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.grid .content-img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    /* border-right: 1px solid var(--color-dark); */
}
@media screen and (max-width: 767.99px) {
    .grid .content-img.second {
        border-right: none;
    }
}
@media screen and (min-width: 768px) and (max-width: 991.99px) {
    .grid .content-img.fourth {
        border-right: none;
    }
}
@media screen and (min-width: 992) {
    .grid .content-img.sixth {
        border-right: none;
    }
}

/* FAQs Section */

.faqs-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .faqs-container {
        margin-block: 72px;
    }    
}

.faqs .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}

.faqs .xover-accordion {
    --bs-accordion-color: inherit;
    --bs-accordion-bg: transparent;
    --bs-accordion-active-color: inherit;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-border-color: var(--color-dark);
    --bs-accordion-border-width: 1px;
    --bs-accordion-border-radius: 0px;
    --bs-accordion-inner-border-radius: 0px;
    --bs-accordion-btn-color: var(--bs-accordion-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-focus-border-color: none !important;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-padding-x: 0px;
    --bs-accordion-btn-padding-y: 0px;
    --bs-accordion-body-padding-x: 0px;
    --bs-accordion-body-padding-y: 0px;
}

.faqs .xover-accordion .accordion-item {
    border-right: 0;
    border-left: 0;
    padding-block: 12px;
}

.faqs .xover-accordion .accordion-button {
    display: flex;
    align-items: center;
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}

.faqs .xover-accordion .accordion-button .index {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}

.faqs .xover-accordion .accordion-item .accordion-body {
    padding-top: 8px;
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}

.faqs .xover-accordion .accordion-button:not(.collapsed) {
    border-bottom: none;
    /* remove duplicate line */
    box-shadow: none;
    /* make sure focus outline doesn’t reintroduce */
}

.faqs .xover-accordion .accordion-collapse {
    border-top: none;
    padding-block: ;
}

/* CTA Section */

.cta {
    background-color: var(--color-primary);
    color: var(--color-light);
}
.cta-container {
    padding-block: 48px;
}
.cta .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.cta .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.cta .accent {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.cta .tag {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 8px;
    padding: 8px 16px;
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    background-color: var(--color-light);
    color: var(--color-primary);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}
.cta .tag > div {
    position: relative;
}
.cta .tag > div .pulse {
    height: 16px;
    width: 16px;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0.5;
    animation: pulseOpacity 2s ease-in-out infinite;
}
.cta .tag > div .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 8px;
    width: 8px;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 1;
}

@keyframes pulseOpacity {
    0%, 100% {
        opacity: 1;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.25);
    }
}

.cta .form-control {
    background-color: transparent;
    border: 1px solid var(--color-light);
    padding: 4px 8px;
    color: var(--color-light);
    border-radius: 1px;
}
.cta .form-control::placeholder {
    color: var(--color-light);
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.cta input[type="file"]::file-selector-button {
    background-color: transparent;
    color: var(--color-light);
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}  
.cta #id_captcha {
    order: 2;
}
.cta #contact-form {
    display: flex;
    flex-direction: column;
}

/* CTA Redirect Section */

.cta_redirect {
    background-color: var(--color-primary);
    color: var(--color-light);
}
.cta_redirect-container {
    padding-block: 48px;
}
.cta_redirect .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.cta_redirect .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.cta_redirect .accent {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.cta_redirect .tag {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 8px;
    padding: 8px 16px;
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    background-color: var(--color-light);
    color: var(--color-primary);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}
.cta_redirect .tag > div {
    position: relative;
}
.cta_redirect .tag > div .pulse {
    height: 16px;
    width: 16px;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0.5;
    animation: pulseOpacity 2s ease-in-out infinite;
}
.cta_redirect .tag > div .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 8px;
    width: 8px;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 1;
}


/* Redacted Text */

.redacted {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    width: 100%; /* demo width, can be responsive */
    color: transparent;
}
  
.redacted-line {
    position: relative;
    display: inline-block;
    width: auto;
    overflow: hidden;
    color: var(--color-dark);
}
  
.redacted-line::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: var(--redacted-bg, #000);
    border-radius: 6px;
    animation-name: reveal;
    animation-name: reveal;
    animation-duration: var(--duration, 2s);
    animation-timing-function: linear;
    animation-delay: var(--delay, 0s);
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
}
  
@keyframes reveal {
    from { width: 100%; }
    to   { width: 0%; }
}

/* Blog List Section */
  
.blog_list-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .blog_list-container {
        margin-block: 72px;
    }    
}

.blog_list .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.blog_list .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.blog_list .content-img {
    width: 100%;
    aspect-ratio: 1;
    display: block;
    background-color: var(--color-dark-subtle);
    object-fit: cover;
}
.blog_list .content-title {
    font: var(--accent-1-font);
    font-weight: var(--fw-550);
    letter-spacing: var(--accent-1-ls);
}
.blog_list .content-data {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}

/* Blog Container */

.blog-container {
    max-width: 720px; /* same as container-md max-width */
    width: 100%;
    margin-left: auto;
    margin-right: auto;

    /* Use Bootstrap horizontal gutter */
    padding-left: var(--bs-gutter-x);
    padding-right: var(--bs-gutter-x);
}

/* Blog Form */

.blog-form-label {
    padding-top: 0.375rem;
}

.blog-form .form-control,
.blog-form .form-select {
    border-radius: 1px;
}

/* Blog Hero Section */

.blog_hero-container {
    margin-top: 48px;
}
@media screen and (min-width: 768px) {
    .blog_hero-container {
        margin-top: 72px;
    }
}

.blog_hero .title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
}
.blog_hero .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.blog_hero img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--color-secondary);
    object-fit: cover;
}

/* Blog Body Section */

.blog_body .title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
}
.blog_body .subtitle {
    font: var(--h4-font);
    letter-spacing: var(--h3-ls);
}
.blog_body .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.blog_body img {
    aspect-ratio: 16/9;
    background-color: var(--color-secondary);
}

/* Pricing Section */

.pricing-container {
    margin-block: 48px;
}
@media screen and (min-width: 768px) {
    .pricing-container {
        margin-top: 72px;
    }    
}

.pricing .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.pricing .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.pricing .content-title {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}
.pricing .content-description {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}
.pricing .price-amount {
    font: var(--h1-font);
    letter-spacing: var(--h1-ls);
}
.pricing .price-suffix {
    font-family: var(--ff-1);
    font-size: var(--p2-fs);
    line-height: var(--p2-lh);
    font-weight: var(--fw-500);
    letter-spacing: var(--p2-ls);
}

/* Terms Section */
.terms .title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
}
.terms .description,
.terms .content-description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.terms .content-title {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
}

/* CKEditor CSS */

/* Limit editor height and make content scrollable */
.ck-editor__editable_inline {
  max-height: 500px;
  overflow-y: auto;
}

.ck .ck-sticky-panel__content {
    border-radius: 1px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.ck .ck-content {
    border-radius: 1px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}