/* ------------------------- Styleguide -------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */


/* ------------------------- Variables -------------------------------------------------- */

:root {
   
   --color-dark-rgb: 24, 24, 26;
   --color-dark: rgba(var(--color-dark-rgb), 1);
   --color-light-rgb: 255, 255, 255;
   --color-light: rgba(var(--color-light-rgb), 1);
   --color-white: #FFFFFF;
   --color-black-rgb: 0, 0, 0;
   --color-black: rgba(var(--color-black-rgb), 1);
   --color-primary: #e4752f;
   --color-primary-dark: #c05921;
   --color-gray: #828282;
   --color-darkgray-rgb: 30, 30, 32;
   --color-darkgray: rgba(var(--color-darkgray-rgb), 1);
   --color-lightgray: #e4e4e4;
   
   --color-border: rgba(var(--color-dark-rgb), 0.2);
   --color-border-light: rgba(var(--color-light-rgb), 0.25);
   
   --color-text: rgba(var(--color-dark-rgb), 0.7);
   --color-text-light: rgba(var(--color-light-rgb), 0.7);

   --color-alert-error: #ff213e;
   --color-alert-success: var(--color-primary);

   --animation-primary: 0.4s cubic-bezier(.75, 0, .25, 1);
   --animation-primary: 0.4s cubic-bezier(0.5, 0.75, 0, 1);
   --animation-thumb: 0.4s cubic-bezier(0.5, 0, .25, 1);
   --animation-smooth: 0.7s cubic-bezier(0.5, 0.5, 0, 1);

   --section-padding-big: min(10vw, 10em);
   --section-padding: min(8vw, 8em);
   --section-padding-medium: min(6vw, 6em);
   --section-padding-small: min(3.5vw, 3.5em);
   --container-padding: min(4vw, 4em);
   /* --container-padding: min(6vw, 6em); */
   --gap-padding: min(4vw, 4em);

   --title-size: clamp(5em, 7.5vw, 7.5em);
   --border-radius: 4vh;   
  
}

@media screen and (min-width: 1440px) {}

@media screen and (max-width: 1024px) {

   :root {
      --section-padding-big: 15vw;
      --section-padding: 12vw;
      --section-padding-medium: 9vw;
      --section-padding-small: 6vh;
   }
}

@media screen and (max-width: 720px) {

   :root {
      --section-padding-big: 20vw;
      --section-padding: 16vw;
      --section-padding-medium: 12vw;
      --section-padding-small: 9vw;
   }
}

/* ------------------------- Body -------------------------------------------------- */


/* Selection */
::selection {
   background-color: var(--color-white); 
   color: var(--color-primary); 
   text-shadow: none;
}

::-moz-selection {
   background-color: var(--color-white); 
   color: var(--color-primary); 
   text-shadow: none;
}
  
/* ------------------------- General -------------------------------------------------- */

/* overflow hidden */
.overflow-hidden {
   overflow: hidden;
   display: inline-block;
}

/* no scrollbar */
::-webkit-scrollbar {
width: 0;
height: 0;
}

/* hide on mobile */
@media (max-width: 768px) { /* Adjust the max-width to match your mobile breakpoint */
   .hide-on-mobile {
     display: none; /* Hide on mobile devices */
   }
 }




/* ------------------------- Cursor -------------------------------------------------- */

/* MouseFollower extra CSS */

.mf-cursor {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 250;
   direction: ltr;
   contain: layout style size;
   pointer-events: none;
   transition: opacity .3s, color .4s;
}

.mf-cursor:before {
   content: "";
   position: absolute;
   top: -24px;
   left: -24px;
   display: block;
   width: 30px;
   height: 30px;
   transform: scale(0.3); /* Initial scale */
   background-color: var(--color-primary); /* Using the primary color */
   transition: transform .25s ease-in-out, opacity .1s, border-color .3s; /* Combined transition properties */
   border-radius: 50%;
   border: 1px solid transparent; /* Default transparent border */
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* Inverse state */
.mf-cursor.-inverse {
   color: #fff;
}

/* Styles for the pointer state */
.mf-cursor.-pointer:before {
   transform: scale(1) !important;  /* Scale up on hover with !important */
   border: 2px solid var(--color-white) !important;  /* White border */
   background-color: #ffffff2e; /* Half-opacity white */
   transition-property: all;
   transition-duration: .3s;  /* Slightly faster transition */
}


@media screen and (max-width: 720px) {
   .mf-cursor {
      display: none;
   }
}


/* ------------------------- lenis smooth scroll -------------------------------------------------- */

  
  /* lenis css */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}