:root {
    /* Default */
    --primary-color: #ff5733;
    --secondary-color: #333;
    --text-color: #111;
    --bg-color: #fff;
    --accent-color: #ffbd69;
    --font-main: 'Arial', sans-serif;
    /* Colors */
    --brand-primary: #f8550f;
    --color-base: #3b4ec7;
    --white: #ffffff;
    --black: #000000;

    /* Global Colors */
    --global25: #f9fafd;
    --global50: #eeeffa;
    --global100: #c6cbef;
    --global200: #9ea7e3;
    --global300: #7783d8;
    --global400: var(--color-base);
    --global500: #3445b5;
    --global600: #2e3da1;
    --global700: #28368d;
    --global800: #232e79;
    --global900: #171f52;

    /* Grays */
    --gray-base: #888888;
    --gray25: #fbfbfb;
    --gray50: #f6f6f6;
    --gray100: #eeeeee;
    --gray200: #d5d5d5;
    --gray300: #bbbbbb;
    --gray400: var(--gray-base);
    --gray500: #7c7c7c;
    --gray600: #6f6f6f;
    --gray700: #626262;
    --gray800: #555555;
    --gray900: #3c3c3c;

    /* Neutral */
    --neutral: var(--gray200);
    --neutral-weak: var(--gray50);
    --neutral-weaker: var(--gray25);
    --neutral-strong: var(--gray400);
    --neutral-stronger: var(--gray800);

    /* Accents */
    --accent: var(--global400);
    --accent-weak: var(--global200);
    --accent-weaker: var(--global50);
    --accent-strong: var(--global600);
    --accent-stronger: var(--global800);

    /* Background Colors */
    --bg-color-page: var(--neutral-weaker);
    --bg-color-nav: var(--white);
    --bg-color-footer: var(--neutral-weaker);
    --bg-color-side-pannel: #495057;

    /* Status Colors */
    --status-critical: #ff0000;
    --status-critical-dark: #8b0000;
    --status-critical-light: #ffd1d1;
    --status-info: #1e90ff;
    --status-info-dark: #00008b;
    --status-info-light: #add8e6;
    --status-normal: #2ecc71;
    --status-normal-dark: #006400;
    --status-normal-light: #ccffcc;
    --status-serious: #ffd700;
    --status-serious-dark: #b8860b;
    --status-serious-light: #fff8dc;
    --status-caution: #ffa500;
    --status-caution-dark: #ff8c00;
    --status-caution-light: #ffe5b4;

    /* State Colors */
    --state-color-default: var(--accent);
    --state-color-hover: var(--accent-strong);
    --state-color-active: var(--accent-strong);
    --state-color-selected: var(--status-info);
    --state-color-disabled: var(--neutral-weak);
    --state-color-error: var(--status-critical);
    --state-color-warning: var(--status-serious);
    --state-color-success: var(--status-normal);

    /* Borders & Surfaces */
    --stroke-color-dark: var(--neutral-strong);
    --stroke-color-light: var(--neutral);
    --stroke-color-disabled: var(--neutral);
    --surface-color-dark: var(--black);
    --surface-color-disabled: var(--neutral);
    --surface-color-subtle-neutral: var(--neutral-weak);
    --surface-color-subtle-primary: var(--accent-weaker);

    /* Text & Icons */
    --text-icon-color-body: var(--neutral-stronger);
    --text-icon-color-accent: var(--accent);
    --text-icon-color-active: var(--state-color-active);
    --text-icon-color-brand-primary: var(--brand-primary);
    --text-icon-color-disabled: var(--neutral);
    --text-icon-color-error: var(--status-critical-dark);
    --text-icon-color-info: var(--status-info-dark);
    --text-icon-color-inverse: var(--white);
    --text-icon-color-link: var(--status-info);
    --text-icon-color-link-hover: var(--status-info-dark);
    --text-icon-color-subtle: var(--neutral);
    --text-icon-color-success: var(--status-normal-dark);
    --text-icon-color-warning: var(--status-caution-dark);

    /* Spacing & Sizing */
    --lineal-scale-0: 0rem;
    --lineal-scale-2: 0.125rem;
    --lineal-scale-4: 0.25rem;
    --lineal-scale-6: 0.375rem;
    --lineal-scale-8: 0.5rem;
    --lineal-scale-10: 0.625rem;
    --lineal-scale-12: 0.75rem;
    --lineal-scale-14: 0.875rem;
    --lineal-scale-16: 1rem;
    --lineal-scale-18: 1.125rem;
    --lineal-scale-20: 1.25rem;
    --lineal-scale-22: 1.375rem;
    --lineal-scale-24: 1.5rem;
    --lineal-scale-26: 1.625rem;
    --lineal-scale-28: 1.75rem;
    --lineal-scale-30: 1.875rem;
    --lineal-scale-32: 2rem;
    --lineal-scale-34: 2.125rem;
    --lineal-scale-36: 2.25rem;
    --lineal-scale-38: 2.375rem;
    --lineal-scale-40: 2.5rem;
    --lineal-scale-48: 3rem;

    --corner-box: var(--lineal-scale-4);
    --margin-section: var(--lineal-scale-48);
    --space-sm: var(--lineal-scale-16);
    --space-md: var(--lineal-scale-24);
    --space-lg: var(--lineal-scale-48);

    /* Z-Index */
    --z-index-base: 0;
    --z-index-dropdown: 9;
    --z-index-tooltip: 99;
    --z-index-overlay: 99;
    --z-index-modal: 999;


    /* Typography */
    /* Typography */
    --font-family-primary: Roboto;
    --font-family-number: Roboto Mono;

    --font-size-caption: 0.6944rem;
    --font-size-body-small: 0.8333rem;
    --font-size-base: 1rem;
    --font-size-body-large: 1.2rem;
    --font-size-headline-small: 1.44rem;
    --font-size-headline-medium: 1.728rem;
    --font-size-headline-large: 2.0736rem;
    --font-size-display-small: 2.4883rem;
    --font-size-display-medium: 2.986rem;
    --font-size-display-large: 3.5832rem;
    /* Font Weights */
    --fontweight-light: 300;
    --fontweight-regular: 400;
    --fontweight-medium: 500;
    --fontweight-bold: 700;
    --fontweight-black: 900;

    /* Font Sizes */
    --text-xs: var(--font-size-caption);
    --p-sm: var(--font-size-body-small);
    --p-md: var(--font-size-body);
    --p-lg: var(--font-size-body-large);
    --h6: var(--font-size-headline-small);
    --h5: var(--font-size-headline-medium);
    --h4: var(--font-size-headline-large);
    --h3: var(--font-size-headline-medium);
    --h2: var(--font-size-headline-large);
    --h1: var(--font-size-display-medium);

    /* Breakpoints */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 481px;
    --breakpoint-md: 769px;
    --breakpoint-lg: 1025px;
    --breakpoint-xl: 1441px;
}


body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
}

* {
    margin: 0;
    padding: 0;
}

@media (max-width: 780px) {
    html {
        font-size: 16px
    }
}

@font-face {
    font-family: 'Mona Sans';
    src: url("../font/Mona-Sans.woff2") format("woff2 supports variations"), url("../font/Mona-Sans.woff2") format("woff2-variations");
    font-weight: 200 900;
    font-stretch: 75% 125%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Mona Sans'
}

body,
p {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 155%
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color-page);
    color: var(--text-icon-color-body);
}





main {
    display: flex;
    flex-direction: column;
    gap: var(--margin-section, 48px);

}




.hero {
    text-align: center;
    padding: 50px 300px 0 300px;
    width: 100%;
    max-width: 1440px;
    height: 350px;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.24) 162.12%);

}

.hero.container {
    width: 100% !important;
    max-width: 1440px;
    padding: 100px 10%;
    box-sizing: border-box;
}



@media (max-width: 1280px) {
    .hero {
        padding: 20px;
        height: auto;
    }

}




.hero h1 {
    font-size: var(--p-lg);
    line-height: 160%;
    letter-spacing: 1px;
    margin-bottom: 12px;
    font-weight: 400;
}





.hero h2 {
    font-size: var(--h1);
    line-height: 110%;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

@media (max-width: 1280px) {
    .hero h1 {
        font-size: 16px;
        font-weight: 400;
    }

    .hero h2 {
        font-size: 28px
    }

}




.section-title {
    text-align: center;
    font-size: var(--h2);
    margin: 2rem 0;
}

.heroUppercase {
    text-transform: uppercase;
    font-weight: 800;
}

.intro {
    text-align: center;
    padding: 40px 20px;
}

/*.container {
    width: 90%;
    max-width: 1440px;
    margin: auto;
    display: flex;
        flex-direction: column;
      
}
.carousel {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.carousel .card {
    flex: 0 0 auto;
    width: 465px;
    background: var(--neutral-weaker);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
*/

/*

.carousel {
    display: flex;
     
        gap: 1rem;
        scroll-snap-type: x mandatory;
   
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: wrap;
        box-sizing: border-box;
        justify-content: space-evenly;
}
    .container {
        width: 100%;
        max-width: 1440px;
        margin: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    
    
    .carousel .card {
        flex: 0 0 auto;
    width: 30%;
        background: var(--neutral-weaker);
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        min-width: 270px;
    }
    
    @media (max-width: 840px) {
        .carousel .card {
         width: 45%;
     }
         
         }
  
  
    @media (max-width: 679px) {
       .carousel .card {
        width: 100%;
    }
        
        }

*/


.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px;
}

.carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    justify-items: start;
    /* Alinea los elementos a la izquierda */
}

.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}



.card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}




.carousel::-webkit-scrollbar {
    display: none;
}

.carousel .card img {
    width: 100%;
}

.carousel .card h3 {
    font-size: 17px;
}

.carousel .card p {
    font-size: 14px;
}




.banners {
    display: grid;
    gap: 16px;
    max-width: 1440px;
    width: 100%;
    margin: auto;

}

.banner {
    background: white;
    color: black;
    padding: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.bannerOff {
    box-shadow: none !important;
    background: none !important;
    border-radius: 0 !important;
}

.banner.full {
    width: 100%;
}

.banner.triple,
.banner.doble {
    display: flex;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.banner.triple div,
.banner.doble div {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.devfullBannerPad {
    padding: 100px 50% 100px 50px;
    box-sizing: border-box;
}

.cardPad1 {
    padding: 100px 50px !important;
    box-sizing: border-box;
}

.h3Center {
    width: 100%;
    text-align: center;
}

/* Responsivo */
@media (max-width: 1024px) {
    .devfullBannerPad {
        padding: 20px;
        box-sizing: border-box;
    }
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-weight: bold;
}

p {
    font-size: 1rem;
    color: #555;
}

/* Responsivo */
@media (max-width: 768px) {

    .banner.triple,
    .banner.doble {
        flex-direction: column;
    }
}

.how-we-do-it {
    display: flex;
    padding: 50px 20px;
    max-width: 1200px;
    margin: auto;
    align-content: space-around;
    flex-wrap: wrap;
    justify-content: space-evenly;
    flex-direction: row;
    align-items: center;
}

.how-we-do-it img {
    width: 50%;
    max-width: 400px;
    border-radius: 10px;
}

.how-we-do-it .content {
    padding-left: 20px;
}

.row-prefooter {
    width: 100%;
    background-color: #151C51;
    height: 252px;
    float: left;
    text-align: center;
    padding-top: 48px;
    box-sizing: border-box;
    font-size: 1.602rem;
    line-height: 125%;
    font-weight: bold;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}



.row-prefooter button {
    display: block
}

.margin-top-footer {
    margin-top: 48px !important;
}

footer {
    width: 100%;
    background-color: #0B0E28;
    height: 39px;
    float: left;
    text-align: center;
    padding-top: 13px;
    box-sizing: border-box;
    font-size: 0.79rem;
    line-height: 125%;
    font-weight: normal;
    color: white;
    margin-top: -48px !important;
}

.float-center {
    margin: 0 auto !important;
}



.title-section {
    width: 100%;
    float: left;
    height: auto;
    color: var(--textColor-primary) !important;
    margin: 0 !important;
    text-align: center
}



.title-section__title {
    transform: translate(0, 0);
    font-size: 26px;
    line-height: 125%;
    font-weight: bold
}

@media (max-width: 780px) {
    .title-section__title {
        font-size: 20px;
        line-height: 125%;
        font-weight: bold;
        padding: 16px
    }
}

.title-section__icon {
    margin: 0 auto
}


.row-section {
    width: 100%;
    margin: 0 auto;
    height: auto;
    float: left;
    box-sizing: border-box
}

@media (max-width: 780px) {
    .row-section {
        margin: 0 auto 32px auto
    }
}

.row-section h2 {
    color: var(--primary-900);
    font-size: 38px;
    line-height: 125%;
    font-weight: 800;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    float: left
}

@media (max-width: 780px) {
    .row-section h2 {
        padding: 0 2%
    }
}

.row-section li {
    color: var(--textColor-medium);
    margin: 16px 0;
    text-align: left
}

.row-section p {
    color: var(--textColor-medium);
    text-align: left
}

@media (max-width: 780px) {
    .row-section p {
        margin: 4px
    }
}

.row-section__image-cont {
    position: absolute;
    border: solid 8px var(--primary-800);
    width: 60%;
    height: 398px;
    top: -8px;
    left: 83px;
    border-radius: 16px
}

@media (max-width: 1440px) {
    .row-section__image-cont {
        display: none
    }
}

.row-section__cont {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    height: auto;
    text-align: center
}

@media (max-width: 1440px) {
    .row-section__cont {
        width: 100%
    }
}

.row-section__cont--left {
    width: 50%;
    float: left;
    padding: 24px 24px 24px 48px;
    box-sizing: border-box;
    position: relative;
    font-size: 1.125rem;
    line-height: 125%;
    font-weight: 400;
    color: var(--primary-800)
}

.row-section__cont--left img {
    width: 100%
}

@media (max-width: 780px) {
    .row-section__cont--left {
        width: 100%;
        padding: 0 24px
    }
}

.row-section__cont--right {
    width: 50%;
    float: left;
    padding: 24px;
    box-sizing: border-box;
    position: relative
}

.row-section__cont--right img {
    width: 80%
}

@media (max-width: 1440px) {
    .row-section__cont--right img {
        position: relative;
        width: 100%
    }
}

@media (max-width: 780px) {
    .row-section__cont--right {
        width: 100%
    }
}



.text-padding-right {
    padding: 100px 200px 0 0 !important;
}

@media (max-width: 1024px) {
    .text-padding-right {
        padding: 20px !important;
    }
}




.numberCircle {

    padding: 5px;
    border-radius: 100px;
    background: var(--accent, #3B4EC7);
    color: var(--white, #FFF);
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin: 9px;
    text-align: center;
    width: 30px;
    display: inline-block;
    height: 30px;
    box-sizing: border-box;
}



.with-us {
    width: 100%;
    max-width: 1440px;
    display: flex;
    justify-content: center;
    gap: var(--margin-section, 48px);
    align-self: stretch;
    flex-direction: column;
    margin: auto;
}


.with-us h2 {
    width: 100%;
    text-align: center;
}

.with-us .card {
    display: flex;
    width: 300px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.with-us .card h3 {
    color: var(--text-icon-color-body, #555);
    text-align: center;
    font-family: Roboto;
    font-size: var(--h3, 27.648px);
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    /* 34.56px */
}

.with-us .card p {
    color: var(--text-icon-color-body, #555);
    text-align: center;
    font-family: Roboto;
    font-size: var(--p-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.section .cont {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg, 48px);
    /* align-self: stretch; */
    margin: auto;
}

@media (max-width: 1024px) {
    .section .cont {
        flex-direction: column;
    }
}

.bannerDev {
    background-image: url(../img/banner-dev.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
}

.textInverse {
    color: var(--text-icon-color-inverse) !important;
}


.alliance {
    display: flex;
    width: 100%;
    max-width: 1440px;
    padding: var(--space-sm, 16px) 108px;
    justify-content: center;
    align-items: center;
    gap: var(--margin-section, 48px);
    box-sizing: border-box;
    background: var(--surface-color-dark);
    margin: -1px auto;
}

.alliance h2 {
    color: var(--text-icon-color-inverse, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: var(--h3, 27.648px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.clients {
    width: 100%;
    padding: 0 10%;
    box-sizing: border-box;
    margin-top: 40px;
}


.clients h2 {
    width: 100%;
    text-align: center;
}

.logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

@media screen and (max-width: 1200px) {
    /* Coloca aquí los estilos que quieras aplicar a dispositivos con ancho ≤ 1024px */

    .logo-container {
        flex-direction: column;
        gap: 40px;
        margin-top: 20px;
    }


    .alliance {
        flex-direction: column;
        padding: 50px 20px;
    }

}


.odoo-lsit {
    display: flex;
    width: 100%;
    max-width: 617px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg, 48px);
    float: left;

}


.odoo-audit {
    display: flex;
    align-items: center;
    gap: var(--space-lg, 48px);
    /* align-self: stretch; */
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    margin: auto;
}

.odoo-audit img {
    width: 100%;
    max-width: 687px;
    height: auto;
    float: left;
}


.odoo-lsit .item {
    display: -webkit-inline-box;
    gap: 16px;
    align-items: flex-start;
}

.odoo-lsit .item h3 {
    color: var(--text-icon-color-body, #555);
    font-family: Roboto;
    font-size: var(--h3, 27.648px);
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    /* 34.56px */
}

.odoo-lsit .item p {
    color: var(--text-icon-color-body, #555);
    font-family: Roboto;
    font-size: var(--p-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
}

.number-list {
    float: left;
    width: 78px;
    height: 78px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: var(--accent, #3B4EC7);
    color: var(--white, #FFF);
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-top: -8px;
    box-sizing: border-box;
    text-align: center;
}

.textOfNunber {
    width: 65%;
    float: left;
    text-align: left;
    margin-left: 16px;

}



.ux-ba01 {
    background-image: url(../img/ux-ba01.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
}


.ui-ba01 {
    background-image: url(../img/ui-ba01.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
}

.idi-ba01 {
    background-image: url(../img/idi-ba01.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
}


.bg1 {
    background-image: url(../img/bg1.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
    background-position: center;
}



.bg2 {
    background-image: url(../img/bg2.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
    background-position: center;
}


.bg3 {
    background-image: url(../img/bg3.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
    background-position: center;
}



.bg4 {
    background-image: url(../img/bg4.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
    background-position: center;
}


.bg5 {
    background-image: url(../img/bg5.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
    background-position: center;
}

.bg6 {
    background-image: url(../img/bg6.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
    background-position: center;
}

.bg-nosotros {
    background-image: url(../img/bg-nosotros.png) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
    background-position: center;
}
.creative {
    color:var(--text-icon-color-brand-primary);
}

@media (max-width: 780px) {

    .bg1, .bg2, .bg3, .bg4, .bg5, .bg6 {
        background-position: unset;
    
    }
}

.border-accent-ux {
    border-top: solid 8px #04BCDB !important;
}

.text-accent-ux {
    color: #026778 !important;
}

.text-accent-light-ux {
    color: #04BCDB !important;
}

.accent-ux {
    background-color: #038AA1 !important;
}


.border-accent-cib {
    border-top: solid 8px #3C6EE7 !important;
}

.text-accent-cib {
    color: #264694 !important;
}

.accent-cib {
    background-color: #3C6EE7 !important;
}


.border-accent-dev {
    border-top: solid 8px #737BB9 !important;
}

.text-accent-dev {
    color: #737BB9 !important;
}

.accent-dev {
    background-color: #737BB9 !important;
}


.border-accent-ui {
    border-top: solid 8px #fc291f !important;
}

.text-accent-ui {
    color: #72140f !important;
}

.accent-ui {
    background-color: #fc291f !important;
}



.border-accent-idi {
    border-top: solid 8px #6a4283 !important;
}

.text-accent-idi {
    color: #6a4283 !important;
}

.text-accent-light-idi {
    color: #d8b5ee !important;
}



.accent-idi {
    background-color: #6a4283 !important;
}