/* ============================ 1.Defualt CSS ======================= */
*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none !important;
}
html,
body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: 'Outfit', sans-serif;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
    display: none;
    scrollbar-width: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}
:root {
    --e-global-color-primary: #FF2424;
    --e-global-color-black: #000000;
    --e-global-color-white: #FFFFFF;
    --e-global-color-gray: #A8A9AD;
    --e-global-color-dark-gray: #222222;
    --e-global-color-light-gray: #F5F6F7;
    --e-global-color-background: #EAE5E0;
    --e-global-typography-primary-font-family: "Outfit", sans-serif;
}
.container {
    max-width: 1290px;
    width: 100%;
    margin: auto;
    padding: 0 12px;
}
.fade_up,
.fade_down,
.zoom_in,
.zoom_out {
    opacity: 0;
    transition: all 2s;
}
.fade_up {
    transform: translateY(-50%);
}
.fade_down {
    transform: translateY(100%);
}
.zoom_in {
    transform: scale(0.5);
}
.zoom_out {
    transform: scale(1.5);
}
.fade_right {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 2s;
}
.fade_left {
    opacity: 0;
    transform: translateX(100%);
    transition: all 2s;
}
.flip_left {
    opacity: 0;
    transform: perspective(400px) rotateY(-90deg);
    transition: all 2s;
}
.flip_right {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
    transition: all 2s;
}
.flip_up {
    opacity: 0;
    transform: perspective(400px) rotateX(-90deg);
    transition: all 2s;
}
.flip_down {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
    transition: all 2s;
}
.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@keyframes paintReveal {
    to {
        clip-path: inset(0 0% 0 0);
    }
}