/* ==========================================================
   PAOREEL STUDIOS V3
   BASE STYLES
   ========================================================== */



/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}



/* ==========================================================
   ROOT
   ========================================================== */

html {

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

}



body {

    font-family: var(--font-family);

    font-size: var(--fs-base);

    font-weight: var(--font-weight-regular);

    line-height: var(--lh-normal);

    letter-spacing: var(--tracking-normal);

    color: var(--color-text);

    background: var(--color-background);

    overflow-x: hidden;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight: var(--font-weight-regular);

    line-height: var(--lh-tight);

    letter-spacing: var(--tracking-tight);

}



p {

    line-height: var(--lh-normal);

}



/* ==========================================================
   LINKS
   ========================================================== */

a {

    color: inherit;

    text-decoration: none;

    transition: color var(--transition-medium);

}



/* ==========================================================
   LISTS
   ========================================================== */

ul,
ol {

    list-style: none;

}



/* ==========================================================
   MEDIA
   ========================================================== */

img {

    display: block;

    width: 100%;

    height: auto;

    user-select: none;

    -webkit-user-drag: none;

}



picture {

    display: block;

}



video {

    display: block;

    width: 100%;

    height: auto;

}



/* ==========================================================
   FORM ELEMENTS
   ========================================================== */

button,
input,
textarea,
select {

    font: inherit;

    color: inherit;

    border: none;

    background: none;

    outline: none;

}



button {

    cursor: pointer;

}



/* ==========================================================
   SVG
   ========================================================== */

svg {

    display: block;

}



/* ==========================================================
   IFRAME
   ========================================================== */

iframe {

    border: 0;

}



/* ==========================================================
   SELECTION
   ========================================================== */

::selection {

    color: var(--color-white);

    background: var(--color-black);

}



/* ==========================================================
   FOCUS
   ========================================================== */

:focus-visible {

    outline: 2px solid var(--color-black);

    outline-offset: 4px;

}



/* ==========================================================
   UTILITIES
   ========================================================== */

.container {

    width: min(100%, var(--site-width));

    margin-inline: auto;

    padding-inline: var(--content-padding);

}



.section {

    padding-block: var(--section-padding);

}



/* ==========================================================
   LENIS
   ========================================================== */

html.lenis {

    height: auto;

}



.lenis.lenis-smooth {

    scroll-behavior: auto;

}



.lenis.lenis-smooth [data-lenis-prevent] {

    overscroll-behavior: contain;

}



.lenis.lenis-stopped {

    overflow: hidden;

}



.lenis.lenis-scrolling iframe {

    pointer-events: none;

}