:root {
     --color-base: rgba(10, 13, 25, 1);
     --color-main: rgba(41, 114, 249, 1);
     --color-light-main: rgba(8, 128, 187, 1);
--color-banner:rgba(23, 32, 52, 1);
     --color-light: rgba(220, 235, 251, 1);
     --font-bebas: 'Bebas Neue', sans-serif;
     --font-inter: 'Inter', sans-serif;
 }

 body {
     background-color: var(--color-base);
     color: white;
     font-family: var(--font-inter);
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--font-bebas);
 }

 .text-bebas {
     font-family: var(--font-bebas);
 }

 .text-inter {
     font-family: var(--font-inter);
 }

 .text-base-cl {
     color: var(--color-base);
 }

 .text-main {
     color: var(--color-main);
 }

 .text-light {
     color: var(--color-light);
 }

 .text-regular {
     font-size: 14px;
 }

 .border-main {
     border-color: var(--color-main);
 }

 .border-base {
     border-color: var(--color-base);
 }

 .border-light-main {
     border-color: var(--color-light-main);
 }

 .border-light {
     border-color: var(--color-light);
 }

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

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

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

 .hover-bg-base:hover {
     background-color: var(--color-base);
 }

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