/*----------------------------------------------
*
* [Custom Stylesheet]
*
* Theme    : Leverage - Creative Agency, Corporate Business & Personal Portfolio Website Template
* Version  : 1.0
* Author   : Codings
* Support  : adm.codings@gmail.com
* 
----------------------------------------------*/

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

[ALL CONTENTS]

1. Colors
2. Backgrounds
3. Buttons 
4. Effects 

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

/*----------------------------------------------
1. Color
----------------------------------------------*/

:root {
    --main-color: #CC0000;
    --secondary-color: #CC0000;
}

/*.primary-color { color: #fc5130 }*/
/*.secondary-color { color: #ff2900 }*/

.primary-color { color: var(--main-color)}
.secondary-color { color: var(--secondary-color) }

.info-color { color: #004e89 }
.success-color { color: #007a4d }
.danger-color { color: #e34f4f }

.white-color { color: #f5f5f5 }
.light-grey-color { color: #eeeeee }
.light-grey-color-2 { color: #e5e5e5 }
.grey-color { color: #2f323a }
.grey-color-2 { color: #808080 }
.grey-color-3 { color: #bbbbbb }
.dark-grey-color { color: #121210 }
.dark-grey-color-2 { color: #1e1e1d }
.black-color { color: #040402 }

.yellow-color { color: #CEFF1A }
.green-color { color: #65FF00 }

.light-blue-color { color: #1a8fe3 }
.blue-color { color: #1E50BC } 
.deep-blue-color { color: #182c50 }
.deep-blue-color-2 { color: #2D446C }
.dark-blue-color { color: #001030 } 

.indigo-color { color: #5900ff  }

/*----------------------------------------------
2. Background
----------------------------------------------*/

.bg-primary-color { background-color: #fc5130 }
.bg-secondary-color { background-color: #ff2900 }

.bg-info-color { background-color: #007a4d }
.bg-success-color { background-color: #007a4d }
.bg-danger-color { background-color: #9e0b28 }

.bg-white-color { background-color: #f5f5f5 }
.bg-light-grey-color { background-color: #eeeeee }
.bg-light-grey-color-2 { background-color: #e5e5e5 }
.bg-grey-color { background-color: #2f323a }
.bg-grey-color-2 { background-color: #808080 }
.bg-grey-color-3 { background-color: #bbbbbb }
.bg-dark-grey-color { background-color: #121210 }
.bg-dark-grey-color-2 { background-color: #1e1e1d }
.bg-black-color { background-color: #040402 }

.bg-yellow-color { background-color: #CEFF1A }
.bg-green-color { background-color: #65FF00 }

.bg-light-blue-color { background-color: #1a8fe3 }
.bg-blue-color { background-color: #1E50BC }
.bg-deep-blue-color { background-color: #182c50 }
.bg-deep-blue-color-2 { background-color: #2D446C }
.bg-dark-blue-color { background-color: #001030 }

.bg-indigo-color { background-color: #5900ff  }

/*----------------------------------------------
3. Buttons
----------------------------------------------*/

a.btn-primary-color, button.btn-primary-color {
    position: relative;
    z-index: 2;
    background-color: var(--main-color);
    border-radius: 2px;
    color: #f5f5f5;
    font-weight: 400;
}

a.btn-primary-color:hover, a.btn-primary-color:focus,
button.btn-primary-color:hover, button.btn-primary-color:focus {
    background-color: var(--main-color);
    background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--main-color) 65%);
    background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--main-color) 65%);
    color: #f5f5f5;
    outline: none;
}

.dark a.btn-primary-color, .dark button.btn-primary-color {
    background-color: transparent;
    border: 2px solid var(--main-color);
}

a.btn-yellow-color, button.btn-yellow-color {
    background-color: transparent;
    border: 1px solid #CEFF1A;
    color: #f5f5f5;
}

a.btn-yellow-color:hover, a.btn-yellow-color:focus,
button.btn-yellow-color:hover, button.btn-yellow-color:focus {
    background-color: transparent;
    color: #f5f5f5;
    outline: none;
}

a.btn-green-color, button.btn-green-color {
    background-color: transparent;
    border: 1px solid #65FF00;
    color: #f5f5f5;
}

.technology a.btn-green-color, .technology button.btn-green-color {
    border-width: 2px;
}

a.btn-green-color:hover, a.btn-green-color:focus,
button.btn-green-color:hover, button.btn-green-color:focus {
    background-color: transparent;
    color: #f5f5f5;
    outline: none;
}

a.btn-blue-color, button.btn-blue-color {
    background-color: #1E50BC;
    border: 1px solid #1E50BC;
    color: #f5f5f5;
    border: none;
}

a.btn-blue-color:hover, a.btn-blue-color:focus,
button.btn-blue-color:hover, button.btn-blue-color:focus {
    background-color: #1a8fe3;
    background-image: -webkit-linear-gradient(45deg, #1a8fe3 15%, #1E50BC  65%);
    background-image: linear-gradient(45deg, #1a8fe3 15%, #1E50BC  65%);
    color: #f5f5f5;
    outline: none;
}

a.btn-deep-blue-color, button.btn-deep-blue-color {
    background-color: #182c50;
    border: 1px solid #182c50;
    color: #f5f5f5;
    border: none;
}

a.btn-deep-blue-color:hover, a.btn-deep-blue-color:focus,
button.btn-deep-blue-color:hover, button.btn-deep-blue-color:focus {
    background-color: #182c50;
    background-image: -webkit-linear-gradient(45deg, #182c50 15%, #001030  65%);
    background-image: linear-gradient(45deg, #182c50 15%, #001030  65%);
    color: #f5f5f5;
    outline: none;
}

/*----------------------------------------------
4. Effects
----------------------------------------------*/

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

.bright-static i {
    -webkit-text-fill-color: var(--main-color);
}

.bright-yellow-static {
    background: -webkit-linear-gradient(45deg, #65FF00 15%, #CEFF1A 65%);
    background: linear-gradient(45deg, #65FF00 15%, #CEFF1A 65%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bright-yellow-static i {
    -webkit-text-fill-color: #CEFF1A;
}

.bright-blue-static {
    background: -webkit-linear-gradient(45deg, #1a8fe3 15%, #1E50BC  65%);
    background: linear-gradient(45deg, #1a8fe3 15%, #1E50BC  65%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bright-deep-blue-static {
    background: -webkit-linear-gradient(45deg, #182c50 15%, #001030  65%);
    background: linear-gradient(45deg, #182c50 15%,#001030  65%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bright-dark-blue-static {
    background: -webkit-linear-gradient(45deg, #182c50 15%, #001030  65%);
    background: linear-gradient(45deg, #182c50 15%, #001030  65%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bright-blue-static i {
    -webkit-text-fill-color: #1a8fe3;
}

.bright-ready {
    background: linear-gradient(to right, var(--main-color) 20%, #2f323a 40%, #2f323a 60%, var(--main-color) 80%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
}

.bright-ready i {
    -webkit-text-fill-color: var(--main-color);
}

.dark .bright-ready,
.classic.classic.agency .bright-ready {
    background: linear-gradient(to right, transparent 0%, var(--secondary-color) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
    text-shadow: 0px 0px 1px var(--main-color);
}

.portfolio .bright-ready {
    background: linear-gradient(to right, transparent 0%, #CEFF1A 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
    text-shadow: 0px 0px 1px #CEFF1A;
}

.portfolio .bright-ready i {
    -webkit-text-fill-color: #CEFF1A;
}

body.technology .bright-ready {
    background: linear-gradient(to right, transparent 0%, #CEFF1A 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
    text-shadow: 0px 0px 1px #CEFF1A;
}

body.technology .bright-ready i {
    -webkit-text-fill-color: #CEFF1A;
}

.business .bright-ready {
    background: linear-gradient(to right, #1a8fe3 20%, #2f323a 40%, #2f323a 60%, #1a8fe3 80%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
}

.business .bright-ready i {
    -webkit-text-fill-color: #1a8fe3;
}

.classic .bright-ready {
    background: linear-gradient(to right, transparent 0%, #1a8fe3 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
    text-shadow: 0px 0px 1px #1a8fe3;
}

.bright:hover {
    background: linear-gradient(to right, var(--main-color) 20%, #2f323a 40%, #2f323a 60%, var(--main-color) 80%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
}

.bright:hover i {
    -webkit-text-fill-color: var(--main-color);
}

.dark .bright:hover,
.classic.agency .bright:hover {
    background: linear-gradient(to right, transparent 0%, var(--secondary-color) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
    text-shadow: 0px 0px 1px var(--main-color);
}

.portfolio .bright:hover {
    background: linear-gradient(to right, transparent 0%, #CEFF1A 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
    text-shadow: 0px 0px 1px #CEFF1A;
}

.portfolio .bright:hover i {
    -webkit-text-fill-color: #CEFF1A;
}

.business .bright:hover {
    background: linear-gradient(to right, #1a8fe3 20%, #2f323a 40%, #2f323a 60%, #1a8fe3 80%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
}

.business .bright:hover i {
    -webkit-text-fill-color: #1a8fe3;
}

.classic .bright:hover {
    background: linear-gradient(to right, transparent 0%, #1a8fe3 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
    text-shadow: 0px 0px 1px #1a8fe3;
}

.technology .bright:hover {
    background: linear-gradient(to right, transparent 0%, #CEFF1A 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
    text-shadow: 0px 0px 1px #CEFF1A;
}

.technology .bright:hover i {
    -webkit-text-fill-color: #CEFF1A;
}

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

.bg-bright-yellow-static {
    background: -webkit-linear-gradient(45deg, #65FF00 15%, #CEFF1A 65%);
    background: linear-gradient(45deg, #65FF00 15%, #CEFF1A 65%);
}

.bg-bright-blue-static {
    background: -webkit-linear-gradient(45deg, #1a8fe3 15%, #1E50BC  65%);
    background: linear-gradient(45deg, #1a8fe3 15%, #1E50BC  65%);
}

.bg-bright-deep-blue-static {
    background: -webkit-linear-gradient(45deg, #182c50 15%, #001030  65%);
    background: linear-gradient(45deg, #182c50 15%,#001030  65%);
}

.bg-bright-black-static {
    background: -webkit-linear-gradient(145deg, #1e1e1d 25%, #040402  65%);
    background: linear-gradient(145eg, #1e1e1d 25%,#040402  65%);
}

.bg-bright-ready {
    background: linear-gradient(to right, var(--main-color) 20%, var(--secondary-color) 40%, var(--secondary-color) 60%, var(--main-color) 80%);
    background-size: 200% auto;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
}

.bg-bright:hover {
    background: linear-gradient(to right, var(--main-color) 20%, var(--secondary-color) 40%, var(--secondary-color) 60%, var(--main-color) 80%);
    background-size: 200% auto;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
}

.bg-bright-black-ready {
    background: linear-gradient(to right, #040402 20%, #121210 40%, #121210 60%, #040402 0%);
    background-size: 200% auto;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
}

.bg-bright-black:hover {
    background: linear-gradient(to right, transparent 20%, #121210 40%, #121210 60%, transparent 0%);
    background-size: 200% auto;
    -webkit-animation: bright 1s linear infinite;
    animation: bright 1s linear infinite;
}