@charset "utf-8"; 


/* Fonts CSS Start*/ 

 @font-face {
     font-family: 'Mona Sans';
     src: url('../fonts/MonaSans-Bold.woff2') format('woff2'), url('../fonts/MonaSans-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Mona Sans';
     src: url('../fonts/MonaSans-ExtraLight.woff2') format('woff2'), url('../fonts/MonaSans-ExtraLight.woff') format('woff');
     font-weight: 200;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Mona Sans';
     src: url('../fonts/MonaSans-ExtraBold.woff2') format('woff2'), url('../fonts/MonaSans-ExtraBold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Mona Sans';
     src: url('../fonts/MonaSans-Medium.woff2') format('woff2'), url('../fonts/MonaSans-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Mona Sans';
     src: url('../fonts/MonaSans-Regular.woff2') format('woff2'), url('../fonts/MonaSans-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Mona Sans';
     src: url('../fonts/MonaSans-Light.woff2') format('woff2'), url('../fonts/MonaSans-Light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Mona Sans';
     src: url('../fonts/MonaSans-Black.woff2') format('woff2'), url('../fonts/MonaSans-Black.woff') format('woff');
     font-weight: 900;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Mona Sans';
     src: url('../fonts/MonaSans-SemiBold.woff2') format('woff2'), url('../fonts/MonaSans-SemiBold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
 }  
 
 /* Fonts CSS End*/

 :root {

    /* Colors */ 
    --background: #F6F6FE;
    --white: #FFFFFF;

    /* Primary */ 
    --common-primary: #5956E3;
    --primary: #5956E3;  
    --primary-transparent: rgba(89, 86, 227, 0.15); 
    --primary-100: #E2DFFD;
    --primary-200: #C3C2F9;
    --primary-300: #A5A1F4;
    --primary-400: #8A8EF0;
    --primary-500: #5956E3;
    --primary-600: #4A49D1;
    --primary-700: #3B39BF;
    --primary-800: #2C28AD;
    --primary-900: #1D1B99; 
    --primary-light-100: #F2F1FE;
    --table-bar: #ECE6FF;
    --chat-primary: #4A3AFF; 
 
    /* Dark */ 
    --common-dark: #111727;
    --dark: #111727; 
    --dark-100: #E5E5EA;
    --dark-200: #CDCCD7;
    --dark-300: #B3B2C2;
    --dark-400: #9B99AE;
    --dark-500: #81809A;
    --dark-600: #686786;
    --dark-700: #4E4C72;
    --dark-800: #36345D;
    --dark-900: #1D1A49;
    --dark-light-100: #F4F4F6;

    /* Logo */ 
    --logo: #1F165B; 
    --logo-100: #79739D;
    --logo-200: #625C8C;
    --logo-300: #4C457C;
    --logo-400: #352D6B;
    --logo-500: #1F165B;
    --logo-600: #1C1452;
    --logo-700: #191249;
    --logo-800: #160F40;
    --logo-900: #130D37;

    /* Gray */ 
    --gray: #222222;
    --common-gray: #222222; 
    --gray-transparent: rgba(34, 34, 34, 0.15); 
    --gray-100: #F7F7F7;
    --gray-200: #E1E1E1;
    --gray-300: #CFCFCF;
    --gray-400: #B1B1B1;
    --gray-500: #9E9E9E;
    --gray-600: #7E7E7E;
    --gray-700: #626262;
    --gray-800: #515151;
    --gray-900: #3B3B3B;

    /* Zinc */
    --zinc-50:  #FAFAFA;
    --zinc-100: #F4F4F5;
    --zinc-200: #E4E4E7;
    --zinc-300: #D4D4D8;
    --zinc-400: #A1A1AA;
    --zinc-500: #71717A;
    --zinc-600: #52525B;
    --zinc-700: #3F3F46;
    --zinc-800: #27272A;
    --zinc-900: #18181B;
    --zinc-950: #09090B;
     
    /* Success */ 
    --common-success: #1DAB45;
    --success: #1DAB45; 
    --success-transparent: rgba(29, 171, 69, 0.15); 
    --success-100: #A4F0A3;
    --success-200: #7AD47B;
    --success-300: #56C75C;
    --success-400: #32BA3D;
    --success-500: #1DAB45;
    --success-600: #17903C;
    --success-700: #147537;
    --success-800: #115B32;
    --success-900: #0E482C; 
    --success-light-100: #E6F7E7;
    --toast-success-bg: #F6FFF9;
 
    /* Warning */ 
    --common-warning: #FFA600;
    --warning: #FFA600; 
    --warning-transparent: rgba(255, 166, 0, 0.15); 
    --warning-100: #FFF3E0;
    --warning-200: #FFE0B2;
    --warning-300: #FFCC80;
    --warning-400: #FFB74D;
    --warning-500: #FFA600;
    --warning-600: #FB8C00;
    --warning-700: #F57C00;
    --warning-800: #EF6C00;
    --warning-900: #E65100; 
    --warning-light-100: #FFF8EC;

    /* Purple */
    --common-purple: #976AF8;
    --purple: #976AF8; 
    --purple-transparent: rgba(151, 106, 248, 0.15); 
    --purple-100: #F2E9FE;
    --purple-200: #DFC8FD;
    --purple-300: #CBA6FB;
    --purple-400: #B78BF9;
    --purple-500: #976AF8;
    --purple-600: #7D55D6;
    --purple-700: #6543B3;
    --purple-800: #4D3190;
    --purple-900: #351F6E; 
    --purple-light-100: #F7F2FF; 
    --purple-table-light-100: #F8FAFF;
    --purple-table-light-200: #F4F1FD;
    --purple-table-light-300: #ECE6FF;
    --purple-table-light-400: #E6DCF8;
    --purple-table-light-500: #D7CCFA;

    /* Pink */
    --common-pink: #FF0A7D;
    --pink: #FF0A7D;  
    --pink-100: #FCE4EF;
    --pink-200: #F9B6D2;
    --pink-300: #F57FB3;
    --pink-400: #F24894;
    --pink-500: #FF0A7D;
    --pink-600: #E0086F;
    --pink-700: #B70659;
    --pink-800: #8F0444;
    --pink-900: #5C082E;
 
    /* Info */
    --info-common: #0092C2;
    --info: #0092C2;
    --info-text: #0092C2;
    --info-transparent: rgba(0, 146, 194, 0.15); 
    --info-100: #E6F7FB;
    --info-200: #C3EAF3;
    --info-300: #A0DCEC;
    --info-400: #7DCEE5;
    --info-500: #0092C2;
    --info-600: #3998B3;
    --info-700: #287A90;
    --info-800: #185C6E;
    --info-900: #0D3C4B; 
    --info-light-100: #F1FAFC;

    /* Danger */
     --danger-common: #D30808;
    --danger: #D30808; 
    --danger-transparent: rgba(211, 8, 8, 0.15); 
    --danger-100: #F7D0D0;
    --danger-200: #F1A7A7;
    --danger-300: #EC7F7F;
    --danger-400: #E75757;
    --danger-500: #D30808;
    --danger-600: #B10606;
    --danger-700: #8F0505;
    --danger-800: #6D0404;
    --danger-900: #4B0303; 
    --danger-light-100: #FCECEC;
    --toast-error-bg: #FFFAFA;
    
        
     /* Font Size */
    --font-size-10: 0.625rem;
    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-22: 1.375rem;
    --font-size-24: 1.5rem;
    --font-size-26: 1.625rem;
    --font-size-28: 1.75rem;
    --font-size-30: 1.875rem;
    --font-size-32: 2rem;
    --font-size-34: 2.125rem;
    --font-size-36: 2.25rem;

     /* Font Weight */
     --font-weight-100: 100;
     --font-weight-200: 200;
     --font-weight-300: 300;
     --font-weight-400: 400;
     --font-weight-500: 500;
     --font-weight-600: 600;
     --font-weight-700: 700;
     --font-weight-800: 800;
     --font-weight-900: 900;
 }

html{
    font-size: 16px;
    scroll-behavior: smooth;
}  

body {
    font-family: "Mona Sans", sans-serif;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-400);
    line-height: 1.4;
    color: var(--dark);
    padding: 0;
    margin: 0;
}  
    
.container-biz {
    width: 100%;
    max-width: 1680px;
}

.bg-white { background-color: var(--white); }  
.text-white { color: var(--white); }  
  
.transition{transition: all 0.1s;}

:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.hero-bg{
  background-image: url(../images/hero-bg.webp); 
}

.marquee-track{
  width: max-content;
  display:flex;
  animation: marquee 18s linear infinite;
}

@keyframes marquee{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}
 

/* Media Query Start */

@media screen and (max-width:767px) {    
} 
@media screen and (max-width:639px) {  
}
@media screen and (max-width:425px) {      
}

/* Media Query End */