/*-----------------------------------------------------------
* Template Name    : Kamal - Personal Portfolio Template
* File Description : This File Includes all Style CSS
*------------------------------------------------------------*/

/*======================================================================
 Table of Content:
 
 01. Google Fonts
 02. Basic Styles
 03. Typography
 04. Buttons
 05. Pre Loader
 06. Header Section
 07. Navigation Menu
 08. Banner Section
 09. About Section
 10. Service Section
 11. Portfolio Section
 12. Blog Section
 13. Contact Section
 14. Inner Pages
    01. Not Found Page
    02. Coming Soon Page
 15. Styles Switcher CSS
 16. Responsive CSS
 ========================================================================*/

/*-----------------------------------------
* 01. Google Fonts
* -----------------------------------------*/
/*-- Jost font --*/
@import url('//fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap');
/*-- Roboto font --*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*-----------------------------------------
* 02. Basic Styles
* -----------------------------------------*/
body {
    font-family: 'Roboto', sans-serif;
    background-color: #26282b;
    color: #c7c7c7;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}

a {
    text-decoration: none;
    color: #c7c7c7;
}

    a:hover {
        color: #000000;
        text-decoration: none;
    }

    a:focus {
        outline: 0 none;
    }

    a:active, a:hover {
        outline: 0;
    }

        a:hover img {
            opacity: 0.88;
        }

    a, a i.fa, a img, .button, .btn {
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

ol, ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gray-bg {
    background-color: #26282b;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.bg-light {
    background-color: #212428 !important;
}

::selection {
    color: #ffffff;
}

.row-items {
    margin-top: -30px;
}

    .row-items .row-item {
        margin-top: 30px;
    }

.form-row {
    margin-right: -10px;
    margin-left: -10px;
}

    .form-row > .col, .form-row > [class*="col-"] {
        padding-right: 10px;
        padding-left: 10px;
    }

.form-group {
    margin-bottom: 20px;
}

.img-fluid, .embed-responsive iframe {
    border-radius: 10px;
}

.img-thumbnail {
    background-color: #212428;
    border: 1px solid #212428;
}

/*-----------------------------------------
* 03. Typography
* -----------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    color: #c7c7c7;
    margin: 0 0 10px;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

p {
    margin: 0 0 15px;
}

    p:last-child {
        margin-bottom: 0;
    }

/*-----------------------------------------
* 04. Buttons
* -----------------------------------------*/
.btn {
    font-family: 'Roboto', sans-serif;
    position: relative;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 13px 33px;
    text-transform: uppercase;
    border: none;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: none;
}

    .btn:focus, button:focus {
        box-shadow: none;
        outline: none !important;
    }

    .btn:before {
        position: absolute;
        top: 0;
        height: 102%;
        left: -25%;
        width: 0%;
        -webkit-transform: skew(-22deg);
        transform: skew(-22deg);
        -webkit-transition-duration: 0.6s;
        transition-duration: 0.6s;
        z-index: 1;
    }

    .btn:hover:before {
        width: 180%;
    }

    .btn span {
        position: relative;
        z-index: 2;
    }

/* Button Small */
.btn-small {
    font-size: 12px;
    padding: 6px 15px;
}

/* Button Primary */
.btn-primary, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

    .btn-primary.disabled, .btn-primary:disabled {
        color: #ffffff;
        background-color: #c7c7c7;
    }

    .btn-primary:hover {
        background: #26282b;
        color: #ec195a;
        box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

    .btn-primary:before {
        content: "";
        background-color: #000000;
    }

/* Button Secondary */
.btn-secondary, .btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

    .btn-secondary:hover {
        background: #26282b;
        color: #ec195a;
        box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

    .btn-secondary.disabled, .btn-secondary:disabled {
        background-color: #c7c7c7;
        color: #ffffff;
    }

    .btn-secondary:before {
        content: "";
        background-color: #444444;
    }

/* Button Link */
.btn-link {
    color: #333333;
    font-weight: 500;
    text-transform: uppercase;
}

    .btn-link:hover {
        color: #000000;
        text-decoration: none;
    }

/* Form Control */
.form-control {
    font-family: 'Roboto', sans-serif;
    background-color: #26282b;
    color: #c7c7c7;
    height: 50px;
    font-size: 14px;
    padding: 10px 22px;
    box-shadow: none;
    outline: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
}

    .form-control:focus {
        color: #c7c7c7;
        background: transparent;
        box-shadow: none;
        outline: none;
    }

    .form-control.is-invalid, .was-validated .form-control:invalid {
        background: none;
        box-shadow: none !important;
    }

.section-spacing {
    padding: 80px 0;
}

.content-block {
    margin-bottom: 50px;
}

    .content-block:last-child {
        margin-bottom: 0;
    }

/* Card Box */
.card-p30 {
    padding: 30px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

.card-p20 {
    padding: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

    .card-p30:hover,
    .card-p20:hover {
        -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
        box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    }

.bg-white, .card {
    background-color: #26282b !important;
}

/*-----------------------------------------
* 05. Pre Loader
* -----------------------------------------*/
.preloader {
    display: none;
    background-color: #26282b;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    text-align: center;
    z-index: 99999;
}

    .preloader.active {
        display: block;
    }

    .preloader .inner-box {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 90px;
        height: 90px;
        border-radius: 10px;
        -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
        box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    }

.preloader-inner {
    border: 4px solid hsla(0,0%,100%,0.2);
    border-top-color: #333333;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*-----------------------------------------
* 06. Header Section
* -----------------------------------------*/
.site-header {
    padding: 20px 0;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

    .site-header .logo .text-logo {
        font-family: 'Jost', sans-serif;
        position: relative;
        color: #c7c7c7 !important;
        text-transform: uppercase;
        font-size: 30px;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 1px;
    }

    .site-header .social-links a {
        color: #c7c7c7;
        font-size: 15px;
        margin-left: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

        .site-header .social-links a:hover {
            -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
            box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
            -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
            transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        }

    .site-header .download-cv-btn.btn {
        font-size: 15px;
        font-weight: 600;
        padding: 12px 24px;
        margin-left: auto;
    }

    .site-header .download-cv-btn .icon {
        display: none;
    }

    .site-header.sticky-header {
        background-color: #26282b;
        padding: 10px 0;
        box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    }

        .site-header.sticky-header .logo .text-logo {
            color: #c7c7c7 !important;
        }

        .site-header.sticky-header .navigation .navbar-nav .nav-item .nav-link {
            color: #c7c7c7;
        }

/*-----------------------------------------
* 07. Navigation Menu
* -----------------------------------------*/
.navigation .navbar-nav .nav-item {
    font-family: 'Roboto', sans-serif;
    position: relative;
    padding: 0 0 0 15px;
}

    .navigation .navbar-nav .nav-item .nav-link {
        color: #c7c7c7;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        padding: 7px 20px;
        letter-spacing: 0.5px;
        position: relative;
        display: block;
        background: transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

        .navigation .navbar-nav .nav-item:hover .nav-link,
        .navigation .navbar-nav .nav-item .nav-link.active {
            -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
            box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
            -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
            transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        }

        .navigation .navbar-nav .nav-item .nav-link i {
            margin-right: 10px;
            position: relative;
            display: none;
        }

/*-----------------------------------------
* 08. Banner Section
* -----------------------------------------*/
.banner-section {
    position: relative;
    background-color: #26282b;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    min-height: 100vh;
    padding: 60px 0;
}

    .banner-section .banner-inner {
        position: relative;
        z-index: 999;
    }

    .banner-section .banner-text h2 {
        color: #c7c7c7;
        font-size: 18px;
        letter-spacing: 0.9px;
        font-weight: 400;
        text-transform: uppercase;
        margin: 0 0 15px;
    }

    .banner-section .banner-text h3 {
        color: #c7c7c7;
        font-size: 43px;
        font-weight: 400;
        letter-spacing: 1px;
        margin: 0 0 15px;
    }

    .banner-section .banner-text p {
        color: #c7c7c7;
        max-width: 510px;
        letter-spacing: 0.2px;
        margin: 0 0 20px;
    }

    .banner-section .banner-text .info-button .fa {
        display: none;
    }

    .banner-section .social-links a {
        color: #c7c7c7;
        font-size: 17px;
        margin: 0 15px 30px 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

        .banner-section .social-links a:hover {
            box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
            -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
            transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        }

/* Particles */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
}

/* Background Image */
.banner-section.header-bg-img {
    background-image: url('../images/banners/home-banner.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
    /* Background overlay opacity */
    .banner-section.header-bg-img:after {
        content: "";
        background-color: rgba(0,0,0,0.8);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

.banner-section .banner-inner .center-picture {
    border-radius: 50%;
    max-width: 300px;
    border: 10px solid #26282b;
    -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

/* Cd Type Word Wrapper */
.cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
}

    .cd-words-wrapper b {
        display: inline-block;
        position: absolute;
        white-space: nowrap;
        left: 0;
        top: 0;
    }

        .cd-words-wrapper b.is-visible {
            position: relative;
        }

.cd-headline.clip .cd-words-wrapper {
    overflow: hidden;
    vertical-align: top;
    border-right: 2px solid #dddddd;
    padding-right: 4px;
}

.cd-headline.clip b {
    opacity: 0;
}

    .cd-headline.clip b.is-visible {
        opacity: 1;
    }

/* Bottom Scroll Arrow */
.scroll-down-arrow {
    position: absolute;
    bottom: 5vh;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999;
    display: block;
    cursor: pointer;
    width: 30px;
    height: 60px;
    border: 2px solid #c7c7c7;
    border-radius: 50px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

    .scroll-down-arrow:before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 8px;
        height: 8px;
        margin-left: -3px;
        background-color: #c7c7c7;
        border-radius: 50%;
        -webkit-animation: scroll_down 2s infinite;
        animation: scroll_down 2s infinite;
    }

@-webkit-keyframes scroll_down {
    0% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        -webkit-transform: translate(0,20px);
        transform: translate(0,20px);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes scroll_down {
    0% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        -webkit-transform: translate(0,20px);
        transform: translate(0,20px);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

/* Section Title */
.section-title {
    position: relative;
}

    .section-title h1 {
        font-size: 50px;
        font-weight: bold;
        text-transform: uppercase;
        margin: 0 0 60px;
        text-align: center;
    }

.section-subtitle h3 {
    margin-bottom: 48px;
    text-align: center;
}

/* Separator */
.separator {
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    background: #c7c7c7;
    width: 150px;
    height: 5px;
    margin: 0 auto;
    border-radius: 50px;
    overflow: hidden;
}

    .separator:after {
        content: "";
        display: block;
        width: 10px;
        height: 5px;
        position: relative;
        background-color: #222222;
        animation: separator 2s linear infinite;
        overflow: hidden;
        border-radius: 2px;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

@keyframes separator {
    0% {
        top: 0;
        left: 0;
    }

    25% {
        left: 25px;
        width: 25%;
    }

    50% {
        left: 50px;
        width: 45%;
    }

    75% {
        left: 75px;
        width: 65%;
    }

    100% {
        left: 150px;
        width: 80%;
    }
}

/*-----------------------------------------
* 09. About Section
* -----------------------------------------*/
.about-details ul li span:first-child, .about-details ul li span:first-child {
    opacity: 0.9;
}
/* Eeducation & Experience */
.education, .experince {
    border-left: 2px solid rgba(255,255,255,0.1);
}

.education-box, .experince-box {
    position: relative;
    box-shadow: 2px 0 0 1px rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 15px 25px;
    border-left: 3px solid;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

    .education-box:before, .experince-box:before {
        content: "";
        left: -37px;
        display: block;
        position: absolute;
        background: #26282b;
        border: 2px solid;
        width: 17px;
        height: 17px;
        border-radius: 50%;
    }

    .education-box:after, .experince-box:after {
        content: "";
        background-color: #c7c7c7;
        display: block;
        position: absolute;
        width: 33px;
        height: 2px;
        top: 23px;
        left: -34px;
        z-index: -1;
    }

    .education-box:hover:before, .experince-box:hover:before {
        background-color: #c7c7c7;
    }

    .education-box:hover, .experince-box:hover {
        box-shadow: 0 0 10px rgba(255,255,255,0.2);
    }

    .education-box span, .experince-box span, .meta-action {
        font-size: 15px;
        font-weight: 400;
    }

/* Skills */
.skills .progressbar {
    width: 100%;
    position: relative;
    background-color: #373737 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.1);
}

.skills .proggress {
    height: 8px;
    width: 10px;
}

.skills .percentCount {
    float: right;
    clear: both;
    font-weight: 600;
    margin-top: -45px;
}

.skills .skill-name {
    margin: 0 0 12px 0;
    line-height: normal;
    opacity: 1;
    font-weight: 600;
    font-size: 15px;
}

/* Counter */
.counter-box h3 {
    border-bottom: 2px solid rgba(102,102,102,0.4);
    font-size: 52px;
    display: block;
    text-align: right;
}

.counter-box h5 {
    font-size: 18px;
    margin: 0;
}

/*-----------------------------------------
* 10. Service Section
* -----------------------------------------*/
.service .card-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

.service .card-title h4 {
    font-size: 22px;
    font-weight: 600;
}

/* Customers Testimonial --*/
.customers-testimonial .item {
    text-align: center;
    margin-bottom: 5px;
    opacity: 0;
    visibility: hidden;
    display: block;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

    .customers-testimonial .item.active {
        opacity: 1;
        visibility: visible;
        -webkit-transform: scale3d(1.0,1.0,1);
        transform: scale3d(1.0,1.0,1);
    }

.customers-testimonial p {
    font-size: 16px;
    margin: 0 0 17px 0;
    font-style: italic;
}

.customers-testimonial .name {
    margin: 17px auto 0;
    display: table;
    width: auto;
    padding: 6px 30px;
    border-radius: 12px;
    text-align: center;
    -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

.customers-testimonial .item:hover .name {
    box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

.customers-testimonial .item img {
    max-width: 90px;
    margin: 0 auto 17px;
    border-radius: 40%;
}

/* Carousel Slider */
.customers-testimonial .carousel-inner {
    overflow: inherit;
}

.carousel .carousel-control-next, .carousel .carousel-control-next:focus,
.carousel .carousel-control-prev, .carousel .carousel-control-prev:focus {
    position: absolute;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 26px;
    text-align: center;
    background-color: #26282b;
    color: #c7c7c7;
    top: calc(50% - 50px);
    border-radius: 50%;
    opacity: 0;
    -webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

.carousel .carousel-control-prev {
    left: -10px;
}

.carousel .carousel-control-next {
    right: -10px;
}
    /* Carousel Arrow */
    .carousel .carousel-control-next:hover, .carousel .carousel-control-prev:hover {
        opacity: 0;
        color: #333333;
        background-color: #26282b;
    }

.carousel:hover .carousel-control-next, .carousel:hover .carousel-control-prev {
    opacity: 1;
    -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
}
/* Carousel Dots */
.carousel .carousel-indicators {
    position: relative;
    margin: 30px auto 0
}

    .carousel .carousel-indicators li.active, .carousel .carousel-indicators li:hover {
        -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
        box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    }

    .carousel .carousel-indicators li {
        background-color: #26282b;
        color: #c7c7c7;
        display: inline-block;
        height: 20px;
        width: 20px;
        margin: 0 8px 0;
        border: none;
        border-radius: 50%;
        -webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

/*-----------------------------------------
* 11. Portfolio Section
* -----------------------------------------*/
.portfolio #portfolio-flters li {
    cursor: pointer;
    text-transform: uppercase;
    background-color: #26282b;
    color: #c7c7c7;
    padding: 12px 35px;
    margin: 0 10px 10px 10px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

    .portfolio #portfolio-flters li.filter-active, .portfolio #portfolio-flters li:hover {
        -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
        box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    }

/* Portfolio Card Info */
.portfolio .portfolio-wrap {
    position: relative;
    overflow: hidden;

}

    .portfolio .portfolio-wrap:before {
        content: "";
        background: rgba(0,0,0,0.6);
        position: absolute;
        left: 30px;
        right: 30px;
        top: 30px;
        bottom: 30px;
        -webkit-transition: all ease-in-out .3s;
        transition: all ease-in-out .3s;
        z-index: 9;
        opacity: 0;
        border-radius: 10px;
    }

    .portfolio .portfolio-wrap .portfolio-info {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        z-index: 99;
        -webkit-transition: all ease-in-out .3s;
        transition: all ease-in-out .3s;
    }

        .portfolio .portfolio-wrap .portfolio-info:before {
            content: "";
            display: block;
            position: absolute;
            top: 35px;
            left: 35px;
            border-top: 1px dashed #ffffff;
            border-left: 1px dashed #ffffff;
            -webkit-transition: all .5s ease 0s;
            transition: all .5s ease 0s;
            z-index: 9994;
            border-radius: 10px;
        }

        .portfolio .portfolio-wrap .portfolio-info:after {
            content: "";
            display: block;
            position: absolute;
            bottom: 35px;
            right: 35px;
            border-bottom: 1px dashed #ffffff;
            border-right: 1px dashed #ffffff;
            -webkit-transition: all .5s ease 0s;
            transition: all .5s ease 0s;
            z-index: 9994;
            border-radius: 10px;
        }

        .portfolio .portfolio-wrap .portfolio-info h4 {
            font-size: 18px;
            color: #ffffff;
            font-weight: 600;
        }

        .portfolio .portfolio-wrap .portfolio-info p {
            color: #ffffff;
            margin: 0 0 15px;
        }

        .portfolio .portfolio-wrap .portfolio-info .portfolio-inner-info {
            position: relative;
            z-index: 9999;
        }

    .portfolio .portfolio-wrap .portfolio-links a {
        background-color: #26282b;
        margin: 0 5px;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }

        .portfolio .portfolio-wrap .portfolio-links a:hover {
            background-color: #000000;
            color: #ffffff !important;
        }

    .portfolio .portfolio-wrap:hover:before {
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        opacity: 1;
    }

    .portfolio .portfolio-wrap:hover .portfolio-info {
        opacity: 1;
    }

        .portfolio .portfolio-wrap:hover .portfolio-info:before {
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
        }

        .portfolio .portfolio-wrap:hover .portfolio-info:after {
            bottom: 20px;
            right: 20px;
            top: 20px;
            left: 20px;
        }

/* Profolio Detail Popup */
.portfolio-details, .blog-details {
    position: relative;
    width: 95%;
    background: #26282b;
    margin: 40px auto;
    padding: 30px;
    border-radius: 5px;
    z-index: 999;
}

.popup-detail-title {
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 25px;
    padding-bottom: 25px;
    line-height: 1;
}

.portfolio-details .mfp-close, .blog-details .mfp-close {
    color: #c7c7c7;
}

.portfolio-details-carousel.carousel .carousel-indicators,
.blog-details-carousel.carousel .carousel-indicators {
    margin: 30px auto;
}

.mfp-close-btn-in .mfp-close {
    font-size: 40px;
}

.mfp-arrow {
    position: fixed;
}

.mfp-fade.mfp-bg {
    height: 100% !important;
    position: fixed !important;
}

.mfp-fade.mfp-wrap {
    height: 100% !important;
    position: fixed !important;
    overflow: hidden auto;
    top: 0 !important;
}

/*-----------------------------------------
* 12. Blog Section
* -----------------------------------------*/
.blog .card {
    border: 0px solid rgba(0,0,0,0.1);
    overflow: hidden;
}

    .blog .card:hover .blog-card-img img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    .blog .card .blog-card-img {
        position: relative;
        overflow: hidden;
        border-bottom: 0px solid;
    }

/* Blog Detail Popup */
.post-tags-social {
    border-top: 1px dotted rgba(255,255,255,0.3);
    border-bottom: 1px dotted rgba(255,255,255,0.3);
    padding: 10px 0;
}

.social-media ul li a {
    font-size: 16px;
    margin: 0 12px 0 0;
}

.social-media ul li:last-child a {
    margin: 0;
}

/*-----------------------------------------
* 13. Contact Section
* -----------------------------------------*/
.contact .card-body {
    padding: 20px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.1);
    -webkit-transition: ease-in-out .3s;
    transition: ease-in-out .3s;
}

    .contact .card-body .card-icon i {
        font-size: 18px;
        background-color: #26282b;
        border-radius: 50%;
        padding: 10px;
        width: 40px;
        height: 40px;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

    .contact .card-body:hover {
        box-shadow: 0 0 10px 0 rgba(255,255,255, 0.1);
    }

        .contact .card-body:hover .card-icon i {
            -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
            box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
        }

    .contact .card-body h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 10px;
    }

    .contact .card-body .social-links a {
        font-size: 18px;
        margin-right: 15px;
    }

.contact .responsive-map {
    overflow: hidden;
    padding-bottom: 50%;
    position: relative;
    height: auto;
}

    .contact .responsive-map iframe {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        border: none;
        border-radius: 10px;
    }

.contact .contact-form .btn-primary:hover {
    background-color: #d0e2f8;
}

.mailsendbtn {
    display: inline-block;
    position: relative;
}

    .mailsendbtn .loading {
        display: none;
        background: #ffffff;
        text-align: center;
        position: absolute;
        right: -45px;
        top: 8px;
        font-size: 20px;
        width: 35px;
        height: 35px;
        border-radius: 4px;
        box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.25);
    }

.error_msg {
    margin: 4px 0 0;
    display: block;
    font-size: 14px;
    color: #ff4141;
}

/* Back To Top Scroll Arrow */
.back-to-top {
    display: none;
    background-color: #26282b;
    border: none;
    color: #c7c7c7;
    cursor: pointer;
    font-size: 24px;
    line-height: 43px;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    text-align: center;
    z-index: 999;
    -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

    .back-to-top:hover {
        background: #26282b;
        color: #ec195a;
        box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

/*-----------------------------------------
* 14. Inner Pages
* -----------------------------------------*/
.pages .main-wrapper {
    padding-top: 84px;
    margin: 0 auto;
}

/* Breadcrumb */
.breadcrumb {
    position: relative;
    background-color: #212428;
    margin: 0;
    padding: 30px 0;
    border-radius: 0;
}

    .breadcrumb .bread-list {
        display: inline-block;
        padding: 5px 15px;
        border-radius: 4px;
        background-color: #2e2f30;
    }

/* 01. Not Found Page */
.search-form .form-control {
    border: none;
    box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

    .search-form .form-control:focus {
        -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
        box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    }

.search-form .btn {
    border: none;
    box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

    .search-form .btn:hover {
        -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
        box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
    }

.not-found-page h1 {
    font-size: 150px;
    font-weight: 300;
    letter-spacing: 4px;
    line-height: 1;
    margin-bottom: 30px;
    text-shadow: -5px -5px 4px rgba(0,0,0,0.68);
}

.not-found-page .search-btn {
    font-size: 20px;
    padding: 10px 20px;
}

.not-found-page .animate-ziro {
    position: relative;
    top: 15px;
    -webkit-animation: movetext 1s infinite;
    animation: movetext 1s infinite;
}

@keyframes movetext {
    50% {
        bottom: 10px;
        top: 0px;
    }
}

/* 02. Coming Soon Page */
.coming-soon {
    background-color: rgba(0,0,0,0.12);
    color: #c7c7c7;
    padding: 30px 20px;
}

    .coming-soon .text-logo {
        font-family: 'Jost', sans-serif;
        position: relative;
        color: #c7c7c7;
        text-transform: uppercase;
        font-size: 50px;
        font-weight: bold;
        line-height: 1;
        letter-spacing: 1px;
        margin: 0 0 25px;
        display: inline-block;
    }

    .coming-soon h2 {
        color: #c7c7c7;
        font-size: 40px;
        line-height: 1;
        margin-bottom: 15px;
    }

    .coming-soon .sub-title {
        font-size: 18px;
    }

    .coming-soon .newsletter-form .input-group {
        max-width: 600px;
        margin: 0 auto;
    }

    .coming-soon .input-group .form-control {
        background-color: #26282b;
        border: none;
        webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

        .coming-soon .input-group .form-control:focus {
            -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
            box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
        }

    .coming-soon .input-group .btn {
        webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

        .coming-soon .input-group .btn:hover {
            -webkit-box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
            box-shadow: -4px -4px 10px 0px #393c40, -4px -4px 5px 0px #393c40, 4px 4px 10px 0px #131416, 4px 4px 5px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416, inset 0px 0px 0px 0px #393c40, inset 0px 0px 0px 0px #131416;
        }

    .coming-soon .countdown li {
        background-color: #26282b;
        width: 80px;
        height: 80px;
        margin: 0 5px 5px;
        padding: 5px;
        border-radius: 4px;
        -webkit-box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        box-shadow: 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #393c40, 0px 0px 0px 0px #131416, 0px 0px 0px 0px #131416, inset -4px -4px 10px 0px #393c40, inset -4px -4px 5px 0px #393c40, inset 4px 4px 10px 0px #131416, inset 4px 4px 5px 0px #131416;
        -webkit-transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
        transition: box-shadow 0.3s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    }

    .coming-soon .countdown .digit {
        color: #c7c7c7;
        font-size: 28px;
        line-height: 28px;
        font-weight: 400;
        display: block;
    }

    .coming-soon .countdown .smalltext {
        margin: 7px 0 0;
        line-height: 14px;
        font-size: 14px;
        color: #c7c7c7;
        display: block;
        text-transform: uppercase;
    }

    .coming-soon .social-icon li a {
        font-size: 20px;
        color: #c7c7c7;
        margin: 0 10px;
    }


/*-----------------------------------------
* 15. Styles Switcher CSS
* -----------------------------------------*/
.switcher-wrapper {
    position: fixed;
    top: 150px;
    left: -202px;
    z-index: 1024;
    width: 202px;
    background-color: #26282b;
    box-shadow: 0 3px 20px 0 rgba(255,255,255,0.1);
    border-radius: 0 8px 8px 0;
    -webkit-transition: ease .5s;
    transition: ease .5s;
}

    .switcher-wrapper.open {
        left: 0;
    }

    .switcher-wrapper .switcher-trigger {
        position: absolute;
        background-color: #444444;
        color: #ffffff;
        width: 40px;
        height: 40px;
        left: 202px;
        top: 10px;
        border-radius: 0 6px 6px 0;
        border: 0;
        font-size: 20px;
        text-align: center;
    }

    .switcher-wrapper .switcher-inner h6 {
        text-align: center;
        font-weight: 500;
        font-size: 15px;
        padding: 15px 0;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .switcher-wrapper .switcher-inner .color-list {
        margin: 0 0 -10px -10px;
    }

        .switcher-wrapper .switcher-inner .color-list li {
            position: relative;
            padding: 0 0 10px 10px;
            display: inline-block
        }

            .switcher-wrapper .switcher-inner .color-list li button {
                position: relative;
                width: 35px;
                height: 35px;
                border: none;
                border-radius: 10px;
                -webkit-transition: .3s;
                transition: .3s;
                font-size: 0px;
                color: #ffffff;
            }

                .switcher-wrapper .switcher-inner .color-list li button:before {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 10px;
                }

    .switcher-wrapper .switcher-inner .green button {
        background: #79d70f;
    }

    .switcher-wrapper .switcher-inner .pink button {
        background: #ff1e56;
    }

    .switcher-wrapper .switcher-inner .blue button {
        background: #40bad5;
    }

    .switcher-wrapper .switcher-inner .orange button {
        background: #ff7315;
    }

    .switcher-wrapper .switcher-inner .purple button {
        background: #9818d6;
    }

    .switcher-wrapper .switcher-inner .yellow button {
        background: #ffd31d;
    }

    .switcher-wrapper .switcher-inner .magenta button {
        background: #ff00ff;
    }

    .switcher-wrapper .switcher-inner .red button {
        background: #ff5d56;
    }


/*-----------------------------------------
* 16. Responsive CSS
* -----------------------------------------*/
/* Medium devices (ipad, less than 1199px) */
@media only screen and (max-width:1199px) {
    .navigation .navbar-nav .nav-item .nav-link {
        font-size: 14px;
    }

    .site-header .download-cv-btn.btn {
        font-size: 14px;
        padding: 12px 10px;
    }
}

/* Medium devices (tablets, less than 992px) */
@media only screen and (max-width:991px) {
    .section-spacing {
        padding: 60px 0;
    }
    /* Header Section */
    .site-header {
        padding: 10px 0;
    }

        .site-header.sticky-header .menu-toggle-line span {
            background: #c7c7c7;
        }

    .banner-section .banner-inner {
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }

        .banner-section .banner-inner .center-picture {
            max-width: 200px;
        }

    .banner-section .social-links {
        -ms-flex-pack: center;
        justify-content: center;
    }

    /* Navigation */
    .navigation .navigation-menu {
        position: fixed;
        max-width: 280px;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1024;
        opacity: 1;
        visibility: visible;
        overflow: auto;
        display: block;
        -webkit-overflow-scrolling: touch;
        -webkit-transition: all .15s ease-in;
        transition: all .15s ease-in;
        background-color: #26282b;
        text-align: left;
        width: 100%;
        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }

        .navigation .navigation-menu.mobile-menu-hide {
            left: -100%;
            opacity: 0;
            visibility: hidden;
        }

    .navigation .navbar-nav {
        padding: 10px;
    }

        .navigation .navbar-nav .nav-item {
            padding: 0;
            margin: 0 0 20px;
            width: 100%;
        }

            .navigation .navbar-nav .nav-item .nav-link {
                color: #c7c7c7 !important;
                padding: 10px 30px 10px 20px;
            }

    .navigation .closeNav-btn {
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        display: block;
        width: 100%;
        text-align: right;
        float: right;
        padding: 10px 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        margin: 0 0 10px;
    }

        .navigation .closeNav-btn i {
            font-size: 16px;
        }

    /* Menu Toggle */
    .navigation .navbar {
        float: right;
        text-align: right;
    }

    .menu-toggle-line {
        width: 40px;
        border: none;
        padding: 7px 0 0;
        background: none;
        z-index: 99;
    }

        .menu-toggle-line.open:after {
            content: "";
            background: rgba(0,0,0,0.5);
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            -webkit-transition: all .15s ease-in;
            transition: all .15s ease-in;
        }

        .menu-toggle-line span {
            height: 2px;
            width: 32px;
            background: #c7c7c7;
            display: block;
            margin: 0 auto 8px;
            transform-origin: 10px 0;
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
        }

        .menu-toggle-line.open span:nth-child(1) {
            -webkit-transform: rotate(45deg) translate(6px,1px);
            transform: rotate(45deg) translate(6px,1px);
        }

        .menu-toggle-line.open span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle-line.open span:nth-child(3) {
            -webkit-transform: rotate(-45deg) translate(6px,-3px);
            transform: rotate(-45deg) translate(6px,-3px);
        }

    .back-to-top {
        bottom: 15px;
        right: 15px;
    }

    .pages .main-wrapper {
        padding-top: 63px;
    }
}

/* Small devices (landscape phones, less than 768px */
@media only screen and (max-width:767px) {
    body {
        font-size: 15px;
        line-height: 26px;
    }

    .btn {
        font-size: 15px;
        padding: 12px 24px;
    }

    .card-p30 {
        padding: 20px;
    }

    .section-spacing {
        padding: 50px 0;
    }

    .content-block {
        margin-bottom: 40px;
    }

    .section-title h1 {
        font-size: 36px;
        margin: 0 0 45px;
    }

    .banner-section .banner-text h3 {
        font-size: 40px;
    }

    .counter-box, .service .card-body, .portfolio-details, .blog-details {
        padding: 20px;
    }

        .portfolio-details h5, .blog-details h5, .blog .card h5 {
            font-size: 18px;
        }

    .popup-detail-title {
        font-size: 22px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .section-title h4, .portfolio-content h4 {
        font-size: 20px;
    }

    .counter-box h5 {
        font-size: 16px;
    }

    .pages .main-wrapper {
        padding-top: 63px;
        margin: 0 auto 40px;
    }

    .coming-soon .text-logo {
        font-size: 40px;
        margin: 0 0 20px;
    }

    .coming-soon h2 {
        font-size: 30px;
    }

    .coming-soon .sub-title {
        font-size: 15px;
    }

    .coming-soon .countdown li {
        width: 55px;
        height: 55px;
    }

    .coming-soon .countdown .digit {
        font-size: 20px;
        line-height: 20px;
    }

    .coming-soon .countdown .smalltext {
        font-size: 11px;
        line-height: 11px;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media only screen and (max-width:575px) {
    .section-title h1 {
        font-size: 32px;
        padding-bottom: 4px;
    }

    .section-subtitle {
        font-size: 23px;
        margin-bottom: 30px !important;
    }

    .banner-section .banner-inner .info-button .btn {
        width: 75%;
        margin-bottom: 15px;
    }

    .banner-section .banner-inner .center-picture {
        max-width: 150px;
    }

    .about-details ul {
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .portfolio #portfolio-flters li {
        width: 44%;
        margin: 0 7px 14px 7px;
    }

    .portfolio-details-gallery {
        margin-right: -10px;
        margin-left: -10px;
    }

        .portfolio-details-gallery .col-6 {
            padding-right: 10px;
            padding-left: 10px;
        }

    .mfp-arrow-left {
        left: -20px;
    }

    .mfp-arrow-right {
        right: -20px;
    }

    .coming-soon .newsletter-form .input-group {
        display: inline-block;
    }

    .coming-soon .input-group .form-control {
        width: 100%;
        margin: 0 0 15px;
    }

    .coming-soon .input-group .input-group-append .btn {
        border-radius: 30px;
        margin: 0 auto;
    }
}