@source ".";
@custom-variant dark (&:where(.dark *));
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root{
    --base-color: #f5f5f7;
    --base-variant: #e2e2e6;
    --text-color: #1c1d21;
    --secondary-text: #443e3e;
    --primary-color: #20253a;
    --accent-color: #27a9ff;
    --nav-bg: rgba(255,255,255, 0.25);
    --font-heading: 'THEBOLDFONT', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-body: 'Inter', sans-serif;
}

.dark{
    --base-color: #111216;
    --base-variant: #1b1c22;
    --text-color: #f0f0f3;
    --secondary-text: #757575;
    --primary-color: #8ea6ff;
    --accent-color: #0065a8;
    --nav-bg: rgba(0,0,0, 0.25);
}

@font-face {
  font-family: "THEBOLDFONT";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url("fonts/theboldfont.ttf") format("truetype");
}

@font-face {
  font-family: "THEBOLDFONT";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("fonts/theboldfont.ttf") format("truetype");
}

#heroSection {
    min-height: 70vh;
}

#footer {
    min-height: 450px;
}

[x-cloak] { 
    display: none !important; 
}

#themeSwitch svg:last-child{
    display: none;
}

.dark #themeSwitch svg:first-child{
    display: none;
}

.dark #themeSwitch svg:last-child{
    display: block;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.1em;
    hyphens: auto;
}

p, a, h4, button, input, span, div, label, legend {
    font-family: var(--font-body);
    color: var(--text-color);
    hyphens: auto;
}

span.navLogo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 25px;
    letter-spacing: 0.1em;
}

span.navEl {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.1em;
}

input[type="radio"] {
    accent-color: var(--accent-color);
}

#valueWrapper {
    overflow-x: clip;
}

.valueContainer:nth-child(odd){
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 5px 10px 5px 0;
    height: fit-content;
    width: 100%;
    background-image: linear-gradient(to right, var(--base-color), var(--base-variant));
}

.valueContainer:nth-child(even){
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    text-align: right;
    padding: 5px 0 5px 10px;
    height: fit-content;
    width: 100%;
    background-image: linear-gradient(to right, var(--base-variant), var(--base-color));
}

.serviceContainer { 
    display: block;
}
.serviceContainerInner{
    position: relative;
    width: clamp(280px, 35vw, 395px);
    height: clamp(180px, 22vw, 250px);
  
}
.serviceContentFront {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.75rem; /* match rounded-xl */
}

.serviceContentFront {
    padding: 8px;
}


.highlight {
    animation: glow 8s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { 
        color: var(--text-color);

    }
    50% { 
        text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color), 0 0 40px var(--accent-color), 0 0 80px var(--accent-color), 0 0 160px var(--accent-color);
        color: var(--accent-color); 
    }
}

.text-wrap {
    text-align: justify;
    line-height: 1.6;
}

#referenceSection p{
    display: flow-root;
    shape-outside: url(images/logo_black.png);
}
#referenceSection img{
    float: left;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    shape-outside: url(images/logo_black.png);
}

input, textarea {
    background-color: var(--base-variant);
    border-color: var(--base-variant);
}

input:focus {
    border-color: var(--accent-color);
}

@media (prefers-reduced-motion: reduce) {
    .marquee { animation: none; }
}

.dragging { 
    cursor: grabbing; 
}

.drag-pan { 
    touch-action: none; 
}

.no-scrollbar { 
    -ms-overflow-style: none; scrollbar-width: none; 
}

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

.justify-text {
  text-align: justify;
  text-justify: inter-word;
}
.justify-text::after {
  content: '';
  display: inline-block;
  width: 100%;
}

.litepicker,
.litepicker .container__main {
  z-index: 100000 !important;
}