:root {
    --primary: #541B2C;
    --secondary: #A6192E;
    --accent: #8B0B22;

    --text: #000000;
    --text-rev: #FFFFFF;

    --text-muted: #565656;

    --bg-primary: #F1F0EC;
    --bg-secondary: #FFFFFF;

    --section-padding: clamp(12px, 6vw, 24px);
    --container-padding: clamp(12px, 6vw, 128px);

    --font-primary: 'Plus Jakarta Sans';
    --nav-height: 150px;

    --text-xs:   clamp(10px, 1.5vw, 12px);
    --text-sm:   clamp(11px, 1.8vw, 14px);
    --text-base: clamp(13px, 2vw,   16px);
    --text-lg:   clamp(14px, 2.5vw, 18px);
    --text-xl:   clamp(15px, 3vw,   20px);
    --text-2xl:  clamp(17px, 3.5vw, 24px);
    --text-3xl:  clamp(19px, 4vw,   30px);
    --text-4xl:  clamp(22px, 5vw,   36px);
    --text-5xl:  clamp(26px, 6vw,   48px);
    --text-6xl:  clamp(28px, 7vw,   60px);
    --text-7xl:  clamp(32px, 8vw,   72px);
    --text-8xl:  clamp(40px, 10vw,  96px);
    --text-9xl:  clamp(52px, 12vw, 128px);

    --space-1:  clamp(4px,  0.5vw,  8px);
    --space-2:  clamp(8px,  1vw,    16px);
    --space-3:  clamp(12px, 1.5vw,  24px);
    --space-4:  clamp(16px, 2vw,    32px);
    --space-6:  clamp(24px, 3vw,    48px);
    --space-8:  clamp(32px, 4vw,    64px);
    --space-12: clamp(48px, 6vw,    96px);
    --space-16: clamp(64px, 8vw,    128px);
    --space-24: clamp(96px, 12vw,   192px);

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   32px;
    --radius-full: 9999px;
}

html {
    scroll-behavior: auto !important;
}

::-webkit-scrollbar {
    width: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) var(--bg-primary);
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    opacity: 0.9;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
}

h1 {
    font-size: var(--text-5xl);
}

h2 {
    font-size: var(--text-4xl);
}

h3 {
    font-size: var(--text-2xl);
}

.section {
    width: 100%;
    padding-left: var(--section-padding);
    padding-right: var(--section-padding);
}

.container {
  width: 100%;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}


.nav {
  background: white;
  padding: 12px 24px;
  border-radius: 999px;
}

.nav a {
    padding: 4px 12px;
}

.card-t .circle {
    transition: all 0.3s ease;
}

.card-t:hover .circle {
    transform: rotateZ(90deg);
}

.dotation-slider .splide__pagination {
    background-color: var(--primary);
    border-radius: 999px;
    gap: 8px;
    padding: 8px 8px;
}

.bricks-button.bricks-background-primary {
    padding: 12px 24px;
    border-radius: 999px;
}