:root {
    --prop-offset: 140px;
}

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


/* FONT START */
.font-nunito {
    font-family: 'Nunito', sans-serif !important;
}
.font-comfortaa {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.heading-font {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}
.playfair-display {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.abril-fatface-regular {
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
}
.instrument-serif-regular {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}
.instrument-serif-regular-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}
.oswald {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.raleway{
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
/* p.kanit-regular {
  font-family: "Kanit", sans-serif !important;
  font-weight: 400;
  font-style: normal;
} */
.oxanium {
  font-family: "Oxanium", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.montserrat-alternates-regular {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.outfit-regular {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.radley-regular {
  font-family: "Radley", serif;
  font-weight: 400;
  font-style: normal;
}

.radley-regular-italic {
  font-family: "Radley", serif;
  font-weight: 400;
  font-style: italic;
}

.special-elite-regular {
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
}

p, .font-avenir {
  font-family: 'Avenir', 'Montserrat', sans-serif;
}

/* FONT END */

/* CURSOR */
/* Hide default cursor */
html, body {
    cursor: none;
}
a, button, .group, input, textarea {
    cursor: none;
}

/* The small solid center point */
.cursor-dot {
    width: 6px;
    height: 6px;
    background-color: rgb(255, 102, 0);
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    mix-blend-mode: difference;
}

/* The flowing outer circle */
.cursor-outline {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9998;
    border-radius: 50%;
    transition: width 0.3s, height 0.3s, background-color 0.3s, opacity 0.3s;
    mix-blend-mode: difference;
}

/* Hover state for links */
.cursor-hover {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}





.highlight-svg {
    pointer-events: none;
}

/* This is the class applied to the path element. */
.highlight-stroke-animate {
    /* 1. Set the transition time (1.4s) and easing. */
    transition: stroke-dashoffset 1.4s ease-out; 
    
    /* 2. Initial State: Hidden. We need the offset to be the full length. 
       This variable will be set by JavaScript. */
    stroke-dashoffset: var(--path-length, 1000px); /* Fallback value for safety */
    
    /* 3. Define the length of the dashes (must match the offset to hide it). 
       This variable will also be set by JavaScript. */
    stroke-dasharray: var(--path-length, 1000px); 
}

/* 4. The class that triggers the animation (Final State: Drawn). */
.highlight-stroke-draw {
    stroke-dashoffset: 0 !important;
}






/* PROPS */
[class*="prop-"] {
    position: relative;
    overflow: visible;
}

.prop-wrapper {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    transform-origin: center;
}

/* positions */
.prop-top-left .prop-wrapper {
    /* top: -80px; */
    left: 0;
}

.prop-top-right .prop-wrapper {
    /* top: calc(-1 * var(--prop-offset)); */
    right: calc(-1 * var(--prop-offset));
}

.prop-bottom-left .prop-wrapper {
    /* bottom: calc(-1 * var(--prop-offset)); */
    left: 0;
}

.prop-bottom-right .prop-wrapper {
    /* bottom: calc(-1 * var(--prop-offset)); */
    right: 0;
}


/* default size */
.prop-wrapper svg, .prop-wrapper img {
    height: auto;
    max-width: 200px;
    display: block;
}

/* size utilities */
.prop-sm .prop-wrapper svg { width: 60px; }
.prop-md .prop-wrapper svg { width: 120px; }
.prop-lg .prop-wrapper svg { width: 200px; }

/* subtle look */
.prop-muted .prop-wrapper svg {
    opacity: 0.15;
}

/* END PROPS */