/*! ------------------------------------------------
 * Project Name: Rayo - Digital Agency & Personal Portfolio HTML Template
 * Project Description: Elevate your digital presence with Rayo - dynamic and stylish HTML template designed for creative agencies and personal brands. With modern layouts, smooth interactions and a polished aesthetic, Rayo template helps showcase projects, services and expertise with clarity and impact.
 * Tags: mix_design, resume, portfolio, personal page, cv, template, one page, responsive, html5, css3, creative, clean, agency, studio 
 * Version: 1.0.0
 * Build Date: July 2025
 * Last Update: August 2025
 * This product is available exclusively on Themeforest
 * Author: mix_design
 * Author URI: https://themeforest.net/user/mix_design *//*! File name: loader.css
 * ------------------------------------------------
 *
 * ------------------------------------------------
 * Table of Contents
 * ------------------------------------------------
 *  01. Loader Styles
 * ------------------------------------------------
 * Table of Contents End
 * ------------------------------------------------ */:root{--_font-accent:"Funnel Display",sans-serif;--base--light:#FAF7F6;--fw-medium--light:600;--t-bright--light:#161616;--base--dark:#161616;--fw-medium--dark:500;--t-bright--dark:#FFFFFF}@media (prefers-color-scheme:light){:root{--base:var(--base--light);--fw-medium:var(--fw-medium--light);--t-bright:var(--t-bright--light)}}@media (prefers-color-scheme:dark){:root{--base:var(--base--dark);--fw-medium:var(--fw-medium--dark);--t-bright:var(--t-bright--dark)}}[color-scheme=light]{--base:var(--base--light);--fw-medium:var(--fw-medium--light);--t-bright:var(--t-bright--light)}[color-scheme=dark]{--base:var(--base--dark);--fw-medium:var(--fw-medium--dark);--t-bright:var(--t-bright--dark)}.loader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000}.loader.loaded{opacity:0;visibility:hidden}.loader__wrapper{position:absolute;top:0;width:100%;height:100%;background:var(--base);color:var(--t-bright);display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}.loader__content{position:absolute;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;z-index:2;color:var(--t-bright);overflow:hidden}.loader__count{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-moz-box-pack:end;-ms-flex-pack:end;justify-content:end;overflow:hidden;line-height:1}.loader__count span{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;font:normal var(--fw-medium) 6rem/.9 var(--_font-accent);letter-spacing:-.06rem;color:var(--t-bright)}@media only screen and (min-width:768px){.loader__count span{font-size:8rem}}@media only screen and (min-width:1200px){.loader__count span{font-size:10rem}}@media only screen and (min-width:1600px){.loader__count span{font-size:12rem}}