/* 
........................................................................................................................
........................................................................................................................
....PPPPPPPPPPPPP.....AAAAAAA.......AARRRRRRRRRRR..RRRRV.......VVVVVVVVEEEEEEEEEEEE.EEEEEEEEEEEEEEE..EENNN.....NNNNN....
....PPPPPPPPPPPPPP....AAAAAAA.......AARRRRRRRRRRRR.RRRRVV.....VVVVVVVVVEEEEEEEEEEEE.EEEEEEEEEEEEEEE..EENNNN....NNNNN....
....PPPPPPPPPPPPPP....AAAAAAAA......AARRRRRRRRRRRRRRRRRVV.....VVVVV.VVVEEEEEEEEEEEE.EEEEEEEEEEEEEEE..EENNNN....NNNNN....
....PPPPP..PPPPPPPP..AAAAAAAAA......AARRR...RRRRRRR.RRRVV.....VVVVV.VVVEE...........EEEEE............EENNNNN...NNNNN....
....PPPPP....PPPPPP..AAAAAAAAA......AARRR.....RRRRR.RRRVVV...VVVVVV.VVVEE...........EEEEE............EENNNNNN..NNNNN....
....PPPPP.....PPPPP..AAAAAAAAAA.....AARRR.....RRRRR.RRRVVV...VVVVV..VVVEE...........EEEEE............EENNNNNN..NNNNN....
....PPPPP....PPPPPP.PAAAA.AAAAA.....AARRR...RRRRRRR..RRVVV...VVVVV..VVVEE...........EEEEE............EENNNNNNN.NNNNN....
....PPPPP..PPPPPPPP.PAAAA.AAAAAA....AARRRRRRRRRRRR...RRVVVV.VVVVVV..VVVEEEEEEEEEEE..EEEEEEEEEEEEEE...EENNNNNNN.NNNNN....
....PPPPPPPPPPPPPP.PPAAAA..AAAAA....AARRRRRRRRRRRR...RRVVVV.VVVVV...VVVEEEEEEEEEEE..EEEEEEEEEEEEEE...EENNNNNNNNNNNNN....
....PPPPPPPPPPPPP..PPAAA...AAAAA....AARRRRRRRRRR......RVVVV.VVVVV...VVVEEEEEEEEEEE..EEEEEEEEEEEEEE...EENNNNNNNNNNNNN....
....PPPPP.........PPPAAAAAAAAAAAA...AARRR..RRRRRR......VVVVVVVVV....VVVEE...........EEEEE............EENNN.NNNNNNNNN....
....PPPPP.........PPPAAAAAAAAAAAA...AARRR..RRRRRRR.....VVVVVVVVV....VVVEE...........EEEEE............EENNN..NNNNNNNN....
....PPPPP.........PPPAA.....AAAAAA..AARRR...RRRRRR.....VVVVVVVVV....VVVEE...........EEEEE............EENNN..NNNNNNNN....
....PPPPP........PPPPAA......AAAAA..AARRR....RRRRRR.....VVVVVVV.....VVVEEEEEEEEEEEE.EEEEEEEEEEEEEEE..EENNN...NNNNNNN....
....PPPPP........PPPPA.......AAAAAA.AARRR.....RRRRRR....VVVVVVV.....VVVEEEEEEEEEEEE.EEEEEEEEEEEEEEE..EENNN...NNNNNNN....
....PPPPP........PPPPA.......AAAAAA.AARRR.....RRRRRR....VVVVVV......VVVEEEEEEEEEEEE.EEEEEEEEEEEEEEE..EENNN....NNNNNN....
........................................................................................................................
........................................................................................................................
 */


/* 
    Import Global CSS Files
    --------------------------------------------------
*/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
/* @import url('grid.css'); */

:root {
    --primary-color: #7879F1;
    --secondary-color: #212529;
    --secondary-color-grade1: #1a1e22;

    --red-color: #E53935;
    --grey-color-grade: #878787;
    --grey-color-grade1: #BDBDBD;
    --grey-color-grade2: #9E9E9E;
    

    --caption-color: #D9D9D9;
    --white-color: #fff;
    --link-color: var(--primary-color);

    --facebook-brand-color: #1877f2;
    --linkdin-brand-color: #2867b2;
    --dribbble-brand-color: #c32361;
    --codepen-brand-color: #000;

    --font-size-16: 16px;

    --background-image: url('../images/app-bg.png');
    --header-container-width: 1500px;
    --container-width: 1350px;
    --letter-spacing-5: 0.5px;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    --heading-font-family: 'Jost', sans-serif;
    --heading-font-color: var(--secondary-color);
    --heading-font-secondary-color: var(--caption-color);
    --heading-font-size: 84px;

    --sub-heading-font-size: 47px;
    --sub-heading-font-color: var(--secondary-color);

    --body-font-family: 'Poppins', sans-serif;
    --body-font-color: var(--secondary-color);
    --body-font-size: 18px;
    --body-font-line-height: 40px;
    --body-font-line-height-mob: 40px;

    --box-shadow: 0 6px 20px rgba(204, 206, 208, .5);
    --box-shadow-light: 0 3px 20px rgba(204, 206, 208, .1);

    --border-color: var(--caption-color);
}


/* 
    Styling for Global
    --------------------------------------------------
*/
body,
html {
    margin: 0;
    padding: 0;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    color: var(--body-font-color);
    line-height: var(--body-font-line-height);
    height: 100%;
    width: 100%;
}

*{
    box-sizing: border-box;
}
img {
    user-select: none;
}
a {
    text-decoration: none;
}
input, button {
    outline: 0;
}
a img,
img {
    border: 0;
}
ul {
    margin: 0;
    padding: 0;
}
p {
    margin-top: 0;
    margin-bottom: 16px;
}
.display-inline-block {
    display: inline-block;
}
.width-100 {
    width: 100%;
}

.font-regular {
    font-weight: var(--font-weight-regular);
}
.font-semi-bold {
    font-weight: var(--font-weight-semi-bold);
}


/* 
    Styling for Link
    --------------------------------------------------
*/
.link-style {
    color: var(--link-color);
    font-weight: var(--font-weight-regular);
}


/* 
    Styling for Section Container
    --------------------------------------------------
*/
.container {
    max-width: 1380px;
    margin: 0 auto;
}
.app-row {
    display: flex;
}
.app-left {
    max-width: 523px;
    margin-right: 16px;
    flex: 2;
}
.app-right {
    /* max-width: 737px; */
    max-width: 100%;
    margin-left: 24px;
    flex: 2;
}



/* 
    Styling for basic Padding Class
    --------------------------------------------------
*/
.padding-0 {
    padding: 0;
}
.padding-top-8 {
    padding-top: 8px;
}
.padding-top-16 {
    padding-top: 16px;
}
.padding-top-24 {
    padding-top: 24px;
}

.padding-right-8 {
    padding-right: 8px;
}
.padding-right-16 {
    padding-right: 16px;
}
.padding-right-24 {
    padding-right: 24px;
}

.padding-bottom-8 {
    padding-bottom: 8px;
}
.padding-bottom-16 {
    padding-bottom: 16px;
}
.padding-bottom-24 {
    padding-bottom: 24px;
}

.padding-left-8 {
    padding-left: 8px;
}
.padding-left-16 {
    padding-left: 16px;
}
.padding-left-24 {
    padding-left: 24px;
}


/* 
    Styling for basic Margin Class
    --------------------------------------------------
*/
.margin-top-8 {
    margin-top: 8px;
}
.margin-top-16 {
    margin-top: 16px;
}
.margin-top-24 {
    margin-top: 24px;
}

.margin-right-8 {
    margin-right: 8px;
}
.margin-right-16 {
    margin-right: 16px;
}
.margin-right-24 {
    margin-right: 24px;
}
.margin-right-32 {
    margin-right: 32px;
}

.margin-bottom-8 {
    margin-bottom: 8px;
}
.margin-bottom-16 {
    margin-bottom: 16px;
}
.margin-bottom-24 {
    margin-bottom: 24px;
}

.margin-left-8 {
    margin-left: 8px;
}
.margin-left-16 {
    margin-left: 16px;
}
.margin-left-24 {
    margin-left: 24px;
}
.margin-left-32 {
    margin-left: 32px;
}


/* 
    Styling for basic css class's
    --------------------------------------------------
*/
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.position-relative {
  position: relative;  
}
.flex {
    display: flex;
}
.flex-2 {
    flex: 2;
}
.flex-justify-center {
    justify-content: center;
}
.flex-v-center {
    align-items: center;
}
.flex-v-end {
    align-items: flex-end;
}


/* 
    Styling for SVG Icons Color/ Size
    --------------------------------------------------
*/
.svg-icon {
    width: 24px;
    height: 24px;
    line-height: normal;
}
.svg-icon svg {
    width: 100%;
    height: 100%;
}
.svg-icon.svg-size-56 {
    width: 56px;
    height: 56px;
}
.svg-icon.svg-size-40 {
    width: 40px;
    height: 40px;
}


/* 
    Styling for Header
    --------------------------------------------------
*/
header.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
}
header.header.header-sticky {
    background: var(--white-color);
    box-shadow: var(--box-shadow);
}
header.header > .container {
    max-width: 1500px;
    display: flex;
    align-items: center;
}
header.header .logo {
    max-height: 80px;
}
header.header .logo a {
    display: inline-block;
    line-height: 0;
    overflow: hidden;
    vertical-align: middle;
}
header.header .logo a img {
    max-width: 100%;
    vertical-align: middle;
}
header.header .navbar {
    flex: 2;
    text-align: right;
}
header.header .navbar ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: end;
}
header.header .navbar ul li {

}
header.header .navbar ul li a {
    font-family: var(--heading-font-family);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semi-bold);
    color: var(--heading-font-color);
    text-transform: uppercase;
    display: block;
    padding: 16px 24px;
}
header.header .theme-changer {
    padding: 12px;
    margin-left: 16px;
    cursor: pointer;
}
header.header .mob-nav {
    display: none;
    padding: 12px;
    background: var(--primary-color);
    border-radius: 100%;
    position: fixed;
    bottom: 16px;
    right: 16px;
}
header.header .mob-nav svg {
    fill: #fff;
}


/* 
    Styling for Page
    --------------------------------------------------
*/
.page {
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    height: 100%;
    padding-top: 102px;
    overflow: auto;
}
.page > .container p {
    font-weight: var(--font-weight-light);
    letter-spacing: var(--letter-spacing-5);
    margin-bottom: 32px;
}
.page > .container p:last-child {
    margin-bottom: 0;
}


/* 
    Styling for Page Heading
    --------------------------------------------------
*/
.page-heading {
    font-family: var(--heading-font-family);
    font-size: var(--heading-font-size);
    font-weight: var(--font-weight-semi-bold);
    color: var(--heading-font-color);
    letter-spacing: var(--letter-spacing-5);
    line-height: normal;
    margin-top: 32px;
    margin-bottom: 104px;
    user-select: none;
}
.page-heading span:nth-child(1) {
    position: relative;
}
.page-heading span:nth-child(1)::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--heading-font-secondary-color);
    width: 100%;
    height: 6px;
}
.page-heading span:nth-child(2) {
    color: var(--heading-font-secondary-color);
    position: relative;
    bottom: -37px;
}

/* 
>>>> Sub Heading <<<<
*/

.sub-heading {
    font-family: var(--heading-font-family);
    font-size: var(--sub-heading-font-size);
    font-weight: var(--font-weight-bold);
    color: var(--sub-heading-font-color);
    letter-spacing: var(--letter-spacing-5);
    margin-top: 90px;
    margin-bottom: 40px;
}


/* 
    Styling for Card Styling
    --------------------------------------------------
*/
.card {
    background-color: var(--white-color);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    padding: 16px;
}
.card.padding-0 {
    padding: 0;
}
.card-title {
    font-family: var(--body-font-family);
    font-size: 18px;
    color: var(--body-font-color);
    font-weight: var(--font-weight-semi-bold);
    line-height: normal;
    letter-spacing: var(--letter-spacing-5);
    display: flex;
}
.card-title a {
    margin: 2px 0 0 2px;
}
.card-title .svg-icon {
    padding: 2px;
}
.card-title .svg-icon svg {
    fill: var(--link-color);
}

.card-caption {
    font-family: var(--body-font-family);
    font-size: 16px;
    color: var(--body-font-color);
    opacity: .74;
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-5);
    line-height: normal;
}

/* 
    Styling for Avtar Styling
    --------------------------------------------------
*/
.avtar {
    width: 72px;
    height: 72px;
    border-radius: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: var(--border-color);
    overflow: hidden;
}


/* 
    Styling for Intro Page 
    --------------------------------------------------
*/
.intro .app-right {
    margin-left: 0;
}
.intro .app-left {
    margin-right: 0;
    max-width: 675px;
}
.intro .intro-title {
    margin: 24px 0;
}
.intro .intro-title p {
    font-family: var(--heading-font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-16);
    margin: 0;
}
.intro .intro-title h1 {
    font-family: var(--heading-font-family);
    font-size: 72px;
    font-weight: var(--font-weight-bold);
    line-height: 60px;
    color: var(--white-color);
    text-transform: uppercase;
    margin: 2px 0 12px 0;
    text-shadow: 2px 2px 0 var(--secondary-color), -2px 2px 0 var(--secondary-color), 2px -2px 0 var(--secondary-color), -2px -2px 0 var(--secondary-color), 5px 5px 0 rgba(0,0,0,.34);
}
.intro .intro-title h1 span {
    color: var(--primary-color);
}
.intro .intro-title div {
    font-family: var(--heading-font-family);
    font-weight: var(--font-weight-medium);
    font-size: 32px;
    line-height: 28px;
    margin-top: 16px;
}
.intro .intro-title div span {
    color: var(--primary-color);
    border-right: solid 3px var(--secondary-color);
    padding-right: 4px;
    padding-left: 8px;
    display: inline-flex;
    animation: cursor-blink 0.3s step-end infinite alternate;
}
.intro .intro-img {
    position: relative;
    text-align: center;
    margin: 0 auto;
    width: 500px;
}
.intro .intro-img img {
    margin-bottom: 15px;
    z-index: 1;
    position: relative;
    max-width: 100%;
}
.intro .intro-img .intro-border {
    width: calc(100% + 32px);
    height: calc(74% + 32px);
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-radius: 100%;
    position: absolute;
    right: -16px;
    bottom: 9px;
    left: -16px;
    margin: auto;
}



/* 
    Styling for Testimonial Card
    --------------------------------------------------
*/
.testimonial-section .card {
    padding: 24px 40px 40px 40px;
    height: 100%;
}
.testimonial-section .card > .flex {
    margin-top: 24px;
}
.testimonial-section .card > .flex > .flex-2 {
    margin-left: 24px;
    /* font-size: var(--font-size-16); */
    font-weight: var(--font-weight-light);
}
.testimonial-section .card .testimonial-nav .svg-icon:first-child {
    margin-right: 40px;
}
.testimonial-section .card svg {
    fill: #757577;
}


/* 
    Styling for Brands Slider
    --------------------------------------------------
*/
.brands-marquee-container {
    padding: 0 20px 20px 20px;
    overflow: hidden;
    margin: 0 -20px -20px -20px;
    max-height: 445px;
}
.brands-marquee-container .marquee-container {
    
}
.marquee-container .marquee-traker.marquee-top-bottom {
    animation: moveTopBottom 60s linear infinite;
}
.marquee-container .marquee-traker.marquee-bottom-top {
    animation: moveBottomTop 60s linear infinite;
}


@keyframes moveTopBottom {
    0% {
        transform: translatey(0);
    }
    50% {
        transform: translatey(-59%);
    }
    100% {
        transform: translatey(0%);
    }
}
@keyframes moveBottomTop {
    0% {
        transform: translatey(-59%);
    }
    50% {
        transform: translatey(0);
    }
    100% {
        transform: translatey(-59%);
    }
}






/* 
    Styling for Portfolio Card
    --------------------------------------------------
*/
.portfolio-card-row {
    display: flex;
    flex-wrap: wrap;
    margin: -20px -20px 0 -20px;
}
.portfolio-card {
    position: relative;
    max-width: calc(100% / 3 - 48px);
    margin: 24px;
}
.portfolio-card.portfolio-card-1of2 {
    max-width: calc(100% / 2 - 48px);
}
.portfolio-card:before {
    content: '';
    background-color: var(--secondary-color);
    border-radius: 10px;
    position: absolute;
    top: 13px;
    right: -13px;
    bottom: 0;
    left: 13px;
    z-index: 0;
}
.portfolio-card .portfolio-card-media {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--secondary-color);
    overflow: hidden;
    line-height: 0;
}
.portfolio-card .portfolio-card-media img {
    max-width: 100%;
}
.portfolio-card .portfolio-card-header {
    position: relative;
    z-index: 1;
    background-color: var(--secondary-color);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semi-bold);
    color: var(--white-color);
    letter-spacing: var(--letter-spacing-5);
    padding: 4px 16px;
    line-height: 40px;
    margin-left: 13px;
    border-bottom-left-radius: 10px;
}
.portfolio-card .portfolio-card-header .flex-2 { 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 16px;
}
.portfolio-card .portfolio-card-header svg {
    fill: var(--white-color);
}

.portfolio-preview {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    overflow: auto;
    background-color: var(--secondary-color);
    user-select: none;
}
.portfolio-preview .portfolio-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: calc(1300px + 120px);
    margin: auto;
}
.portfolio-preview .portfolio-toolbar svg {
    fill: #fff;
    cursor: pointer;
}
.portfolio-preview .portfolio-toolbar .portfolio-preview-close {
    position: absolute;
    top: 50px;
    left: 0;
    width: 32px;
    height: 32px;
}
.portfolio-preview .portfolio-toolbar .portfolio-preview-prev {
    position: absolute;
    top: 50vh;
    left: 0;
}
.portfolio-preview .portfolio-toolbar .portfolio-preview-next {
    position: absolute;
    top: 50vh;
    right: 0;
}
.portfolio-preview-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--secondary-color);
    cursor: none;
}
.portfolio-close-cursor {
    background-color: var(--white-color);
    position: absolute;
    padding: 6px;
    display: none;
    z-index: 2;
    border-radius: 100%;
    cursor: none;
}
.portfolio-preview-overlay:hover .portfolio-close-cursor {
    display: block;
}
.portfolio-preview .container {
    background: var(--white-color);
    margin-top: 32px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
    max-width: 1300px;
    border-radius: 4px;
}
.portfolio-preview-meta {
    display: flex;
    transition: 0.3s all ease;
    overflow: hidden;
    height: 0;    
    padding-left: 32px;
    padding-top: 32px;
    padding-right: 32px;
    position: sticky;
    top: 0;
    background: #fff;
}
.portfolio-preview.portfolio-preview-active .portfolio-preview-meta {
    height: 140px;
}
.portfolio-preview-meta > .flex {
    padding-top: 24px;
    width: 100%;
    padding-bottom: 16px;
    justify-content: center;
}
.portfolio-preview .portfolio-preview-skin {
    padding: 24px;
    background: #fff;
    text-align: center;
}
.portfolio-preview .portfolio-preview-skin img {
    max-width: 100%;
    margin: 0 auto;
}
.portfolio-preview h3 {
    font-family: var(--heading-font-family);
    font-size: 32px;
    font-weight: var(--font-weight-semi-bold);
    letter-spacing: var(--letter-spacing-5);
    margin: 8px 0 0 0;
}
.portfolio-preview p {
    font-size: var(--font-size-16);
    line-height: 28px;
    letter-spacing: var(--letter-spacing-5);
    margin-top: 0;
}
.portfolio-preview .skill-card-section .card {
    height: 88px;
    margin: 0 4px;
    padding: 8px 0px 8px 0px;
    width: 103px;
}


/* 
    Styling for Game Preview
    --------------------------------------------------
*/
.game-preview {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--secondary-color);
    overflow: hidden;
    margin: auto;
    width: 100%;
    height: 0vh;
    z-index: 99;
    transition: 0.3s all ease;
}
.game-preview.open-game-preview,
.game-preview.open-game-preview iframe {
    height: 100vh;
}
.game-preview.open-game-preview .game-preview-close {
    display: block;
}
.game-preview iframe {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 0;
    transition: 0.3s all ease;
    border: none;
}
.game-preview-close {
    position: fixed;
    top: 24px;
    right: 24px;
    background-color: #fff;
    z-index: 99;
    padding: 14px;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    cursor: pointer;
    box-shadow: 0px 0px 9px 1px #000;
    display: none;
}



/* 
    Styling for Footer
    --------------------------------------------------
*/
footer.footer {
    font-family: var(--body-font-family);
    font-size: 16px;
    margin-top: 72px;
}
footer.footer > .container {
    display: flex;
    align-items: center;
    max-width: 1500px;
    padding: 24px 16px;
    border-top-style: solid;
    border-top-width: 8px;
    border-top-color: var(--secondary-color);
}


/* 
    Styling for Contact Form
    --------------------------------------------------
*/
.contact-form {
    max-width: 1048px;
    margin: 0 auto;
}
.contact-form .flex {
    margin-top: 32px;
}
.contact-form .flex .flex-2:nth-child(1) {
    margin-right: 22px;
}
.contact-form .flex .flex-2:nth-child(2) {
    margin-left: 22px;
}
.contact-form .flex .flex-2:last-child {
    margin-right: 0;
}


/* 
    Styling for Chip
    --------------------------------------------------
*/
.chip {
    white-space: nowrap;
    background: var(--white-color);
    margin-right: 24px;
    margin-bottom: 24px;
    padding: 0 24px;

    font-family: var(--body-font-family);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-5);
    font-size: var(--font-size-16);
    line-height: 46px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--secondary-color);
    box-shadow: 6px 6px 0 -2px var(--secondary-color);
    cursor: pointer;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    transition: 0.2s all ease;
}
.chip:hover {
    box-shadow: 11px 11px 0 -2px var(--secondary-color);
}
.chip:active {
    box-shadow: 4px 4px 0 -2px var(--secondary-color);
}
.chip .svg-icon {
    margin-right: 8px;
    margin-left: -8px;
}
.facebook-chip {
    color: var(--facebook-brand-color);
    border-color: var(--facebook-brand-color);
    box-shadow: 6px 6px 0 -2px var(--facebook-brand-color);
}
.linkedin-chip {
    color: var(--linkdin-brand-color);
    border-color: var(--linkdin-brand-color);
    box-shadow: 6px 6px 0 -2px var(--linkdin-brand-color);
}
.dribbble-chip {
    color: var(--dribbble-brand-color);
    border-color: var(--dribbble-brand-color);
    box-shadow: 6px 6px 0 -2px var(--dribbble-brand-color);
}
.codepen-chip {
    color: var(--codepen-brand-color);
    border-color: var(--codepen-brand-color);
    box-shadow: 6px 6px 0 -2px var(--codepen-brand-color);
}


/* 
    Styling for Radio Button
    --------------------------------------------------
*/
.radio-style {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.radio-style input {
    /* display: none; */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
}
.field-error.radio-style label:not(.error) {
    border-color: var(--red-color);
    box-shadow: 6px 6px 0 -2px var(--red-color);
}
.radio-style input:checked + label:not(.error) {
    color: var(--primary-color);
    box-shadow: 6px 6px 0 -2px var(--primary-color);
    border-color: var(--primary-color);
}
.radio-style label.error {
    top: -37px;
    right: 47px;
}

/* 
    Styling for Input Field, Textarea, Button
    --------------------------------------------------
*/
label.error {
    position: absolute;
    top: 19px;
    right: 8px;
    font-size: 12px;
    background: var(--red-color);
    color: var(--white-color);
    border-radius: 4px;
    padding: 1px 8px;
    line-height: 25px;
}
.label-style {
    font-family: var(--body-font-family);
    font-size: var(--font-size-16);
    color: var(--secondary-color);
    letter-spacing: var(--letter-spacing-5);
    font-weight: var(--font-weight-medium);
}
.form-ctrl {
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: var(--secondary-color);
    background: var(--white-color);
}
.form-ctrl label:not(.error) {
    position: absolute;
    top: 18px;
    line-height: normal;
    display: block;
    width: 100%;
    padding-left: 16px;
    color: var(--grey-color-grade);
    font-size: var(--font-size-16);
    transition: 0.3s all ease;
}
.form-ctrl label:not(.error) span {
    color: var(--red-color);
    padding-left: 2px;
}
.form-ctrl input,
.form-ctrl textarea {
    display: block;
    padding: 0 16px;
    width: 100%;
    height: 60px;
    border: none 0px transparent;
    outline: 0;
    font-family: var(--body-font-family);
    font-size: var(--font-size-16);
    color: var(--secondary-color);
    letter-spacing: var(--letter-spacing-5);
}
.form-ctrl textarea {
    min-height: 130px;
    padding-top: 25px;
    resize: none;
}

.form-ctrl.has-value label:not(.error) {
    top: 8px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
}
.form-ctrl.has-value input,
.form-ctrl.has-value input {
    height: 40px;
    margin-top: 18px;
    margin-bottom: 2px;
}
.form-ctrl.field-error {
    border-color: var(--red-color);
}




.primary-button {
    background-color: var(--primary-color);
    font-family: var(--heading-font-family);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semi-bold);
    color: var(--white-color);
    letter-spacing: var(--letter-spacing-5);
    text-transform: uppercase;
    border-color: transparent;
    border-width: 0;
    padding: 16px 24px;
    min-width: 176px;
    text-align: center;
    margin-top: 24px;
    margin-right: 24px;
    cursor: pointer;
    box-shadow: 6px 6px 0 -2px #393989;
    transition: 0.3s all ease;
}
.primary-button:hover {
    box-shadow: 11px 11px 0 -2px #393989;
}
.primary-button:active {
    box-shadow: 4px 4px 0 -2px #393989;
}
.secondary-button {
    background-color: var(--white-color);
    font-family: var(--heading-font-family);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semi-bold);
    color: var(--primary-color);
    letter-spacing: var(--letter-spacing-5);
    text-transform: uppercase;
    border-color: var(--primary-color);
    border-width: 1px;
    padding: 16px 24px;
    min-width: 176px;
    text-align: center;
    margin-top: 24px;
    cursor: pointer;
    box-shadow: 6px 6px 0 -2px #393989;
}





.skill-card-section {
    margin-left: -8px;
    margin-right: -8px;
}
.skill-card-section .card {
    width: 115px;
    height: 117px;
    margin: 0 8px 24px 8px;
    padding: 16px 0;
    text-align: center;
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    letter-spacing: var(--letter-spacing-5);
}
.skill-card-section .card:last-child {
    margin-right: 0;
}
.skill-card-section .card .svg-icon {
    margin: 0 auto;
}



/* Timeline Container CSS Start */
.timeline-container {
    margin: 0 0 0 4px;
}
.timeline-container .timeline-container-items {
    list-style: none;
    position: relative;
    padding: 12px 0 12px 20px;
}
.timeline-container .timeline-container-items:after,
.timeline-container .timeline-container-items:before {
    content: '';
    position: absolute;
}
.timeline-container .timeline-container-items:after {
    left: 4px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-color);
}
.timeline-container .timeline-container-items:before {
    width: 8px;
    height: 8px;
    background: var(--border-color);
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 100%;
}
.timeline-container .timeline-container-items:first-child:after {
    top: 22px;
}
.timeline-container .timeline-container-items:last-child:after {
    bottom: 22px;
}
/* End of Timeline Container CSS */


/* 
    Styling for App Dark Theme
    --------------------------------------------------
*/
/* body.dark-theme header.header-sticky,
body.dark-theme .card {
    box-shadow: var(--box-shadow-light);
}
body.dark-theme .page,
body.dark-theme header.header-sticky {
    background: var(--secondary-color);
}
body.dark-theme .card {
    background: var(--secondary-color-grade1);
    box-shadow: none;
}
body.dark-theme .theme-changer svg {
    fill: var(--white-color);
}
body.dark-theme .page-heading {
    color: var(--white-color);
}
body.dark-theme header.header .navbar ul li a,
body.dark-theme .card {
    color: var(--grey-color-grade1);
}
body.dark-theme .card-title {
    color: var(--grey-color-grade1);
}
body.dark-theme footer.footer > .container,
body.dark-theme .page > .container p,
body.dark-theme .card-caption {
    color: var(--grey-color-grade2);
}
body.dark-theme .page-heading span:nth-child(2),
body.dark-theme .page-heading span:nth-child(1)::after {
    opacity: .1;
}
body.dark-theme .form-ctrl {
    border-color: var(--grey-color-grade2);
}
body.dark-theme .form-ctrl,
body.dark-theme .form-ctrl input, 
body.dark-theme .form-ctrl textarea {
    background: var(--secondary-color-grade1);
    color: var(--white-color);
}
body.dark-theme .chip {
    background: var(--secondary-color-grade1);
    box-shadow: 6px 6px 0 -2px var(--secondary-color-grade1);
    color: var(--grey-color-grade1);
    border-color: var(--secondary-color-grade1);
}
body.dark-theme .portfolio-card:before,
.portfolio-card .portfolio-card-header {
    background-color: var(--secondary-color-grade1);
}
body.dark-theme footer.footer > .container {
    border-top-color: var(--white-color);
} */


@keyframes cursor-blink {
    50% {
        border-color: transparent;
    }
}

@media screen and (max-width:767px) {
    body, html {
        line-height: var(--body-font-line-height-mob);
    }
    header.header .mob-nav {
        display: inline-flex;
    }
    header.header > .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    header.header .logo {
        width: 150px;
    }
    header.header > .container > .flex {
        justify-content: flex-end;
    }
    .navbar {
        display: none;
    }
    .navbar.open-nav {
        display: inline-flex;
        position: absolute;
        top: 70px;
        left: 0;
        background: var(--white-color);
        right: 0;
        height: calc(100vh - 70px);
    }
    header.header .navbar ul {
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }
    .intro .intro-title {
        margin-top: 0;
    }
    .intro .intro-img {
        max-width: 350px;
        margin: 32px auto 24px;
    }
    .intro .intro-title h1 {
        font-size: 64px;
        line-height: 68px;
    }
    .intro .intro-title h1 span {
        display: block;
    }
    .page {
        padding-left: 24px;
        padding-right: 24px;
    }
    .page-heading {
        margin-top: 0;
        margin-bottom: 40px;
        font-size: 36px;
        text-align: center;
    }
    .page-heading span:nth-child(2) {
        display: block;
        bottom: -8px;
    }
    .sub-heading {
        font-size: 29px;
    }
    .app-row {
        flex-direction: column;
    }
    .app-row .app-left,
    .app-row .app-right {
        margin: 0;
    }
    .app-row div.skill-card-section {
        margin-bottom: 40px;
    }
    .skill-card-section .skill-card {
        width: calc(50% - 19px);
    }
    
    .skill-card-section br {
        display: none;
    }
    .exp-card .width-100 .flex {
        flex-direction: column;
    }
    .img-fluid {
        max-width: 100%;
    }
    .app-right.testimonial-section {
        margin-top: 32px;
    }
    .testimonial-section .card {
        padding: 24px;
    }
    .testimonial-section .card > .flex:not(.testimonial-nav) {
        margin-top: 16px;
        flex-direction: column;
    }
    .testimonial-section .card > .flex > .flex-2 {
        margin-left: 0;
    }
    .portfolio-card {
        max-width: calc(100% - 60px);
    }
    .contact-form .flex {
        display: block;
    }
    .contact-form .flex .flex-2:nth-child(1) {
        margin-right: 0;
    }
    .contact-form .flex .flex-2:nth-child(2) {
        margin-left: 0;
        margin-top: 32px;
    }
    footer.footer > .container {
        display: block;
        text-align: center;
    }
    footer.footer > .container .flex {
        justify-content: center;
    }
}

@media screen and (max-width:991px){ 
    
}