: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;
} */
p, .oxanium {
  font-family: "Oxanium", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/* FONT END */





.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 */