.opacity08 {
    opacity: 0.8;
}

.opacity09 {
    opacity: 0.9;
}

.greenBG {
    background-color: #01fbb3;
}

.orangeBG {
    background-color: #e76319;
}

.purpleBG {
    background-color: #703eff;
}

.ratio628 {
    aspect-ratio: 628 / 449;
}

.mt6 {
    margin-top: 6px;
}

.h60 {
    height: 60px;
}

.text20 {
    font-size:20px;
}

.colorTransparent {
   color: transparent; 
}

.icon-menu36 {
    font-size: 36px;
    line-height: 40px;
}

.margin-block-auto {
    margin-block: auto;
}

.margin-auto {
    margin: auto;
}

.padding12-2 {
    padding:12px 2px
}

.padding12-24 {
    padding:12px 24px
}

.h48 {
    height:48px
}

.gap24 {
    row-gap:24px;column-gap:24px;
}

.gap8 {
    row-gap:8px;column-gap:8px;
}

.container-custom {
    min-height:50px; padding-top:30px; padding-bottom:10px;
}

.learn-more-cta {
    padding:10px 15px; border-radius:60px; background-color:#D5E7FF;
}

.cta-bg-img {
    margin-top:0px important!;margin-bottom: 0px important!
}

.cta-btn-overide {
    background-color:#F9FAFB; display: flex; text-decoration: none;
}

.hero-bg {
    background-color: rgba(226, 169, 110, 0.2);
}

/* ------------------- */
.container2 {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}
.header-web {
    display: none;
}
.header-mobile {
    display: block;
}
.header-spacer {
    display:none;
    height:0px;
}
.header-spacer-mobile {
    display:block;
    height:94px;
}
.p-6 {
    padding: 30px;
}

@media (min-width: 48rem) {
    .md\:p-8 {
        padding: 40px;
    }
}

@media only screen and (min-width: 1200px) {
    .header-web {display: block;}
    .header-mobile {display: none;}
    .header-spacer {
        display: block;
        height:72px;
    }
    .header-spacer-mobile {
        display:none;
        height:0px;
    }
}

.header-custom {
    background-color: #f9fafb;
    z-index: 999;
}

.dropdown-product {
    top: 72px;
    padding: 24px;
}

.overflow-y-auto {
    overflow-y: auto;
}

.max-h-screen {
    max-height: 100vh;
}
/* learcn more CTA */

.no-margin-tb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.white-no-underline {
    color: white !important;
    text-decoration: none !important;
    padding:10px 24px !important;
}

/* bg newsletter cta */

.gradient-text {    
                            
    background: linear-gradient(90deg,#703eff 5%,#2c97ff 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    width: fit-content;
    display: block;
}
.white-header {
    background: none !important;
    color: white !important;
    -webkit-text-fill-color: snow !important;
}
.no-margin-tb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* hover */
.hover\:shadow-gray-400:hover {
    --tw-shadow-color: #9ca3af;
    --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-2xl:hover {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:-translate-y-1:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.px-\[16px\] {
    padding-left: 16px;
    padding-right: 16px;
}

.h-\[94px\] {
    height: 94px;
}

.top-94 {
    top: 94px;
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.leading-\[1\.75rem\] {
    line-height: 1.75rem;
}

.font-medium {
    font-weight: 500;
}

.text-\[1\.25rem\] {
    font-size: 1.25rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
}

.divide-\[rgba\(17\2c 24\2c 39\2c 1\)\] > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(17, 24, 39, 1);
}

.divide-\[0\.5px\] > :not([hidden]) ~ :not([hidden]) {
    border-color: 0.5px;
}

.divide-dashed > :not([hidden]) ~ :not([hidden]) {
    border-style: dashed;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.overscroll-contain {
    overscroll-behavior: contain;
}

.overflow-y-auto {
    overflow-y: auto;
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.h-\[calc\(100vh-12\%\)\] {
    height: calc(100vh - 12%);
}

.width-200 {
    width: 200px;
}