/*----------------------------------------------
*
* [Default Stylesheet]
*
* Theme    : Leverage - Have a real factory of creative templates in your hands.
* Version  : 1.1.0
* Author   : Codings
* Support  : adm.codings@gmail.com
* 
----------------------------------------------*/

/*----------------------------------------------

[ALL CONTENTS]

1. Root
2. Button
3. Effects

----------------------------------------------*/

/*----------------------------------------------
1. Root
----------------------------------------------*/

/* #region Root */

:root {
    
    --primary-font: 'Poppins', sans-serif;

    --h1-font: 'Poppins', sans-serif;
    --h1-size: 5rem;
    --h1-weight: 800;
    --h1-line-height: 1.25;

    --header-bg-color: #f5f5f5;
    --nav-item-color: #2f323a;

    --primary-color: #fc5130;
    --secondary-color: #E0040B;
    --white-color: #f5f5f5;
    --black-color: #040402;
    --dark-grey-color: #191919;

    --primary-t-color: #2f323a;
    --secondary-t-color: #f5f5f5; 
    --primary-p-color: #6f6f6f;
    --primary-b-color: #f5f5f5;
    --primary-l-color: rgba(0, 0, 0, .25);
    --secondary-l-color: rgba(255, 255, 255, 0.25);

    --valid-color: #007a4d;
    --invalid-color: #e34f4f;
    --translucent-bg-color: rgba(252, 81, 48, 0.15);

    --primary-bg-color: #f5f5f5;
    --secondary-bg-color: #eeeeee;
    --tertiary-bg-color: #e5e5e5;

    --card-bg-color: #f5f5f5;

    --filter-logo: invert(0);
    --bg-image-1: url('../../assets/images/bg-1.jpg');
    --bg-image-2: url('../../assets/images/bg-2.jpg');
}

/* #endregion Root */

/*----------------------------------------------
2. Button
----------------------------------------------*/

/* #region Button */

.primary-button,
.primary-button:visited, .primary-button:active {
    position: relative;
    z-index: 2;
    padding: 10px 25px;
    background-color: var(--primary-color);
    border-radius: 2px;
    color: var(--primary-b-color);
    font-weight: 400;
}

.primary-button:hover, .primary-button:focus {
    background-color: var(--primary-color);
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
    color: var(--primary-b-color);
}

/* #endregion Button */

/*----------------------------------------------
4. Effect
----------------------------------------------*/

/* #region Effect */

.effect-static-text {
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.effect-static-text i {
    -webkit-text-fill-color: var(--primary-color);
}

.effect-motion-text,
.effect-motion-hover:hover {
    background-image: linear-gradient(to right, var(--primary-color) 20%, var(--primary-t-color) 40%, var(--primary-t-color) 60%, var(--primary-color) 80%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: effect 1s linear infinite;
    animation: effect 1s linear infinite;
}

.effect-motion-text i,
.effect-motion-hover:hover i {
    -webkit-text-fill-color: var(--primary-color);
}

.effect-static-bg {
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
}

.effect-motion-bg {
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
    background-size: 200% auto;
    -webkit-animation: effect 1s linear infinite;
    animation: effect 1s linear infinite;
}

/* #endregion Effect */