/* =======================================
   KAIZEN
   Base Style
======================================= */

:root{

--black:#050505;
--dark:#111111;
--white:#ffffff;
--gray:#8d8d8d;
--light:#d8d8d8;
--red:#c1121f;

--radius:24px;

--transition:.45s cubic-bezier(.2,.8,.2,1);

--container:1400px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Manrope',sans-serif;

background:var(--black);

color:var(--white);

overflow-x:hidden;

}

img{

display:block;
width:100%;

}

a{

text-decoration:none;

color:white;

transition:var(--transition);

}

button{

font-family:inherit;

}

ul{

list-style:none;

}

section{

padding:160px 8%;

position:relative;

}

.container{

max-width:var(--container);

margin:auto;

}

::selection{

background:var(--red);

color:white;

}



/* =========================
Scrollbar
========================= */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#090909;

}

::-webkit-scrollbar-thumb{

background:var(--red);

border-radius:50px;

}



/* =========================
Background Noise
========================= */

body::before{

content:"";

position:fixed;

inset:0;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

opacity:.025;

pointer-events:none;

z-index:999;

}



/* =========================
Progress Bar
========================= */

.progress{

position:fixed;

left:0;

top:0;

height:3px;

width:0;

background:var(--red);

z-index:999999;

}



/* =========================
Button
========================= */

.button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 46px;

border:1px solid rgba(255,255,255,.15);

border-radius:100px;

letter-spacing:5px;

font-size:13px;

text-transform:uppercase;

overflow:hidden;

position:relative;

transition:var(--transition);

backdrop-filter:blur(20px);

}

.button::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(193,18,31,.4),
transparent
);

transition:.8s;

}

.button:hover{

border-color:var(--red);

padding-inline:60px;

}

.button:hover::before{

left:100%;

}



/* =========================
Titles
========================= */

section span{

color:var(--red);

letter-spacing:6px;

font-size:13px;

text-transform:uppercase;

display:inline-block;

margin-bottom:20px;

}

section h2{

font-size:72px;

line-height:1.1;

margin-bottom:35px;

font-weight:700;

letter-spacing:-2px;

}

section p{

max-width:720px;

font-size:18px;

line-height:2;

color:var(--gray);

}



/* =========================
Image Hover
========================= */

img{

transition:1s;

}

img:hover{

transform:scale(1.03);

}



/* =========================
Divider
========================= */

.divider{

height:1px;

background:rgba(255,255,255,.06);

margin:120px 0;

position:relative;

}

.divider::after{

content:"改善";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

background:var(--black);

padding:0 40px;

color:rgba(193,18,31,.5);

letter-spacing:8px;

font-size:22px;

}
/*==============================

Reveal Animation

==============================*/

.hidden{

opacity:0;

transform:translateY(80px);

transition:

opacity .9s ease,

transform .9s ease;

}

.show{

opacity:1;

transform:translateY(0);

}
/*====================================

Animation Helpers

====================================*/

.reveal-text{

display:inline-block;

animation:titleReveal 1.2s ease both;

}

@keyframes titleReveal{

0%{

opacity:0;

transform:translateY(80px);

}

100%{

opacity:1;

transform:translateY(0);

}

}



/* کارت سه‌بعدی */

.card{

transform-style:preserve-3d;

perspective:1200px;

transition:

transform .35s ease,

box-shadow .35s ease;

}

.card:hover{

box-shadow:

0 35px 80px rgba(0,0,0,.45);

}

/*================================

LOADER

================================*/

#loader{

position:fixed;

left:0;

top:0;

width:100%;

height:100vh;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

z-index:9999999;

transition:1s;

}

.loader-logo{

text-align:center;

}

.loader-logo span{

display:block;

font-size:26px;

letter-spacing:10px;

color:var(--red);

margin-bottom:15px;

animation:pulse 1.8s infinite;

}

.loader-logo h1{

font-family:'Bebas Neue';

font-size:120px;

letter-spacing:10px;

}

.loader-hide{

opacity:0;

visibility:hidden;

}

@keyframes pulse{

0%{

opacity:.2;

transform:scale(.9);

}

50%{

opacity:1;

transform:scale(1);

}

100%{

opacity:.2;

transform:scale(.9);

}

}
.button{

overflow:hidden;

}

.button::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:70%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.5),

transparent

);

transform:skewX(-20deg);

transition:.8s;

}

.button:hover::after{

left:160%;

}