/*
Theme Name: Portfolio 2025
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: One-page portfolio theme converted from static site. jQuery 3.6.0 CDN, Bootstrap 5, editable nav and social links via WordPress.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: portfolio-2025
*/


* {
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: auto;
    position: relative;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    height: auto;
    min-height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    background-color: white;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

h1 {
    margin: 0 0 0.75rem;
    font-family: halyard-display, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 3.75rem;
    color:#fff;
    letter-spacing: 0.0375rem;
}

h2 {
    margin: 0 0 0.75rem;
    font-family: halyard-text, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 2.75rem;
    color: #fff;
}

h3 {
    margin: 0 0 0.75rem;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.75rem;
    color:#fff;
    letter-spacing: 0.0375rem;
}

h4 {
    margin: 0 0 0.75rem;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.35rem;
    color: #fff;
    letter-spacing: 0.0375rem;
}


p {
    margin: 0 0 1rem;
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

li {
    list-style-type: none;
    margin: 0 0 1rem;
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.75rem;
}

a,
button {
    font-family:bebas-neue, sans-serif;
    font-weight: normal;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    
}

button {
    border-width: 0;
    border-color: unset;
    border-image: unset;
}

svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    fill: #fff;
}

:focus {
    background-color: transparent;
    outline: none;
    outline-width: 0;
    outline-style: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input[type='checkbox'] {
    width: auto;
    height: auto;
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    clip: rect(0, 0, 0, 0);
    cursor: pointer;
}


main {
    width:100%;
    height: 100%;
    position: relative;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

.section {
    width:100%;
    min-height: 100vh;
    height:auto;
    position: relative;    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding:6.25rem;
    background-color:#1d1e23;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

.section:nth-of-type(even) {
    background-color: #222327;
}

.section .inner {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    box-sizing: border-box;
}

.section .inner > h2,
.section .inner > h3 {
    margin:0 auto 2rem;
    text-align: center;
    color:#fff;
}

.section .inner h4 {
    width: 100%;
    text-align: initial;
    margin:0 auto 2rem;
}

.section .inner p {
    color:#fff;
}

.section .inner p strong {
    color:#0a66c2;
}

.section .inner > p {
    text-align: center;
}

.section.active {
    opacity: 1;
}

.left,
.right {
    width: 50%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: auto;
    box-sizing: border-box;
}

article {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin:0 auto 1rem;
    box-sizing: border-box;
}

.icon-bg {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.5rem;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}


.icon-label {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: halyard-text, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.25rem;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    color:#fff;
}


.btn {
    width: auto;
    min-width: 8rem;
    height: auto;
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    margin:0 auto;
    padding: 1rem 1.5rem;
    border-radius:1.75rem;
    font-family: halyard-text, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.25rem;
    color:#fff;
    border-color:#0a66c2;
    border-width: 0.125rem;
    border-style: solid;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: pointer;
    box-sizing: border-box;
}

.btn::before {
    content: '';
    width: calc(100% - 3.25rem);
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    top:0;
    left: 0;
    border-radius:1.5rem 1.5rem 0 1.5rem;
    background-color:#0a66c2;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

.btn svg {
    fill:#fff;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.btn:hover {
    color: #0a66c2;
}

.btn:hover::before {
    width: 100%;
    border-radius: 1.5rem;
    color: #0a66c2;
    background-color: #fff;
}

.btn:hover svg {
    fill: #0a66c2;
}

.btn:hover,
.btn:hover .icon-label {
    color:#0a66c2;
}

.btn .icon-bg:last-of-type {
    margin:0 0 0 1rem;
}

.left .btn,
.right .btn {
    margin:1rem 1rem 1rem 0;
    align-self:flex-start;
}

.container {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
}

.container .item {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    margin:0 0 1rem;
    box-sizing: border-box;
}

.item {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:0 0 1rem;
    box-sizing: border-box;
}

.item ul {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items:flex-start;
    box-sizing: border-box;
}

.item ul li {
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    list-style-type: none;
    box-sizing: border-box;
}

.item ul li img {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    box-sizing: border-box;
}

.item label {
    color:#fff;
}

.image-container {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 2;
}

.image-container img {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    box-sizing: border-box;
}

.brands {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing:border-box;
}

.brands li {
    width: calc(100%/4 - 2.5rem);
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:0 1.25rem 1rem;
    box-sizing: border-box;
}

.brands li img {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    margin: auto;
    box-sizing: border-box;
}

.brands li label {
    font-size: 1.25rem;
    text-align: center;
    color:#fff;
}

.programs {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.programs .brands li {
    width: auto;
    flex-direction: column;
    justify-content: center;
}

.programs .brands li img {
    max-width: 3.5rem;
}

.skill-label, 
.skill-bar {
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin:0 0.5rem;
    box-sizing: border-box;
}

.skill-label {
    width: calc(100% - 11rem);
}

.skill-bar {
    width:auto;
    flex-direction: column;
    justify-content: flex-end;
}

.skill-level {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.skill-level .dot {
    width: 0.75rem;
    height: 0.75rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;    
    margin: 0.25rem 0.25rem;
    background-color: transparent;
    border-radius: 100%;
    border-width: 0.25rem;
    border-color: #bdbdbd;
    border-style: solid;
    -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

.skill-level .fill {
    border-color: #0a66c2;
    background-color: #0a66c2;
}

.skill-level-label {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0.5rem 0 auto;
    font-size: 1rem;
    box-sizing: border-box;
}

.scrollTop {
    width: 2.5rem;
    height: 2.5rem;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0.66rem;
    left: 1.5rem;
    bottom: 1.5rem;
    border-radius: 0.5rem;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: pointer;
    box-sizing: border-box;
    z-index: 1;
}

.scrollTop svg {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    fill: #e3dfdf;
    cursor: pointer;
}

.scrollTop:hover {
    background-color: #0a66c2;
}


.hide,
.hidden {
    display: none;
}

.smooth-scrolling {
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.no-scroll {
    overflow: hidden;
}

/* 
===========================================================================================
============================== Animation Transition Styles ================================
===========================================================================================
*/


@keyframes scaleUp {
    from {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
}


@keyframes slideUp {
    from {
        -webkit-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        transform: translate(0, 100%);
    }

    to {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}


@keyframes slideDown {
    from {
        -webkit-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
        -moz-transform: translate(0, -100%);
        transform: translate(0, -100%);
    }

    to {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes slideLeft {
    from {
        -webkit-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
        -moz-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
    }

    to {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes slideRight {
    from {
        -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        -moz-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }

    to {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes logoFillAnimation {
    from {
        height: 0;
    }
    to {
        height: 792px; /* Match the height of the SVG viewBox */
    }
}


.hidden-item {
    opacity: 0;
    -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translate(0, 2rem);
    -ms-transform: translate(0, 2rem);
    -moz-transform: translate(0, 2rem);
    transform: translate(0, 2rem);

}

.hidden-item.show {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.slideUp {
    opacity: 0;
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    transform: translate(0, 100%);
}


.slideDown {
    opacity: 0;
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    transform: translate(0, -100%);
}

.slideLeft {
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.slideRight {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

.animate {
    opacity: 1;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-fill-mode: forwards;
}

.animate.slideUp {
    animation-name: slideUp; 
}

.animate.slideDown { 
    animation-name: slideDown; 
}

.animate.slideLeft { 
    animation-name: slideLeft; 
}

.animate.slideRight { 
    animation-name: slideRight; 
}


/* 
===========================================================================================
=================================== Header CSS ============================================
===========================================================================================
*/

header {
    width:100%;
    height:auto;
    position:fixed;
    display:flex;
    justify-content: space-between;
    align-items: center;
    top:0;
    z-index:3;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

header::after {
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    background-color: rgba(0,0,0,0.6);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 1;
}


.logo-wrapper {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:2rem 1.75rem;
    box-sizing: border-box;
    z-index: 3;
}

.logo {
    width:2.75rem;
    height:auto;
    position: relative;
    display:flex;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: pointer;
    box-sizing: border-box;
}

.logo-under {
    height: 2.75rem;
    position: absolute;
    top: 0;
    left: 0;
    fill: #bdbdbd;
    z-index: 0;
}

.logo-fill {
    z-index: 1;
}

.logo-fill path {
    fill: #fff;
}

.logo-fill .clip-rect {
    animation-name: logoFillAnimation;
    animation-duration: 1.2s;
    animation-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1); ;
    animation-fill-mode: forwards;
}


/* ------- Menu Hamburger Icon Styles for mobile -------  */

#nav-trigger {
    width: auto;
    height: auto;
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    clip: rect(0, 0, 0, 0);
    cursor: pointer;
}

#hmbg {
    width:4.75rem;
    height:4.75rem;
    position: relative;
    display: none;
    top: 0;
    right: 0;
    margin: 2rem 1.75rem;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    z-index: 4;
}

.open,
.close {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    right: 0;
    top: 0;
    box-sizing: border-box;
}

.open line,
.close line {
    fill: none;
    stroke-width: 5.2094;
    stroke-miterlimit: 10;
    stroke-dasharray: 68;
    stroke:white;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.close line {
    stroke-dashoffset: 68;
}

#hmbg .open,
#hmbg .close {
    padding:1.5rem;
}

.close-button {
    width: 2.75rem;
    height: 2.75rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.66rem;
    border-radius: 100%;
    box-sizing: border-box;
}

.close-icon {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    box-sizing: border-box;
}

.close-icon line {
    fill: none;
    stroke: #bdbdbd;
    stroke-dashoffset: 0;
    stroke-width: 5.2094;
    stroke-miterlimit: 10;
    stroke-dashoffset: 68;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}


/* Menu Animation when Hamburger Icon Clicked for Mobile */

#nav-trigger:checked ~ header #hmbg {
    background-color: transparent;
    box-shadow: 0 0 0 transparent;
    -webkit-box-shadow: 0 0 0 transparent;
}

#nav-trigger:checked ~ header #hmbg .close line {
    stroke: #fff;
    stroke-dashoffset: 0;
}

#nav-trigger:checked ~ header #hmbg .open line {
    stroke-dashoffset: 68;
}

#nav-trigger:checked ~ header .nav-wrapper {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
}

#nav-trigger:checked ~ header::after {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
}

/*----------- Navigation Menu ---------*/

.nav-wrapper {
    width:auto;
    height:auto;
    position:relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0.5rem 0;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
    overflow: hidden;
}

.nav-wrapper::-webkit-scrollbar {
    width: 0.25em;
}

.nav-wrapper::-webkit-scrollbar-thumb {
    background-color: #69696a;
}

.nav-wrapper::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}


nav {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

nav ul {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

nav ul li {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    margin:0 1rem;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

nav ul li a {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.125rem 1rem;
    font-size: 1.25rem;
    line-height: unset;
    color:#fff;
    -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

nav ul li a::after {
    content: '';
    width: 0;
    height: 0.25rem;
    position: absolute;
    top: 100%;
    left: 0;
    right:0;
    margin:0 auto;
    border-radius: 0.25rem;
    background-color: #277fd7;
    -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translate(0, 0.125rem);
    -moz-transform: translate(0, 0.125rem);
    transform: translate(0, 0.125rem);
    box-sizing: border-box;
}

nav ul li a:hover::after,
nav ul li a.active::after {
    width: 75%;
}

.main-nav {
    width: auto;
    height:auto;
    position:relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    margin:auto 1rem;
    background-color: transparent;
    box-sizing: border-box;
}




/* 
===========================================================================================
================================= Social Media CSS ========================================
===========================================================================================
*/


.social-media-wrapper {
    width:auto;
    height:auto;
    position:fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items: center;
    align-self: center;
    margin:auto;
    top: 0;
    left:0;
    bottom:0;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    background-color: transparent;
    box-sizing: border-box;
    z-index: 1;
}


.social-media {
    width: auto;
    height: auto;
    position:relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin:0 2rem;
    box-sizing: border-box;
    z-index:1;
}

.social-media ul {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction:column;
    box-sizing: border-box;
}

.social-media ul li {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    margin:0.5rem 0;
    line-height: unset;
    box-sizing: border-box;
}

.social-media ul li a {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    border-radius:100%;
    line-height: unset;
    -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

.social-media ul li a svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    fill: white;
    -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.social-media-wrapper .facebook a:hover {
    background-color:#3b5998;
}

.social-media-wrapper .instagram a:hover {
    background-color:#4b87bf;
}

.social-media-wrapper .linkedin a:hover {
    background-color:#0a66c2;
}

.social-media-wrapper .dribbble a:hover {
    background-color:#ea4c89;
}

.social-media-wrapper .social-media a:hover svg {
    fill:#fff;
}

/* 
===========================================================================================
==================== Changing Colors once passing Cover Section Styles ====================
===========================================================================================
*/

.sticky {
    position: fixed;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}


.sticky .logo {
    fill: #1d1d1d;
}

.sticky .main-nav ul li a {
    color:#1d1d1d;
}

.sticky .main-nav ul li a:hover,
.sticky .main-nav ul li a.active {
    color:#4b87bf;
}


.counter {
    width: auto;
    height: auto;
    position: fixed;
    display: block;
    bottom: 0;
    right: 0;
    margin:2rem;
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    line-height: 1.75em;
    color: #fff;
    z-index: 3;
}

/* 
===========================================================================================
================================= Slider Style CSS ========================================
===========================================================================================
*/


.slider,
.slider-inner {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slider {
    overflow: hidden;
}

.slider-inner {
    flex-wrap: nowrap;
    touch-action: pan-y;
}

.slider .item {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex:0 0 100%;
    align-items: center;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

.slider .item .card {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex:1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding:2.5rem 2rem;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

.indicator-container {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    margin:0 auto;
    padding:1rem 0;
    top:0;
    left: 0;
    right: 0;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
}

.dot {
    width: 2rem;
    height: 2rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:0 0.5rem;
    padding:0.5rem;
    border-radius: 100%;
    background-color: #bdbdbd;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: pointer;
    box-sizing: border-box;
}



.indicator-container .dot .num-label {
    width: 100%;
    height:100%;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    top:0;
    left:0;
    right:0;
    bottom:0;
    color:#0d2986;
    border-radius: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.indicator-container .dot .caption {
    width: auto;
    min-width: 5rem;
    height: auto;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    bottom:-2rem;
    left:0;
    right: 0;
    color:#fff;
    box-sizing: border-box;
}

.dot.active {
    background-color: #277fd7;
}

.prev-icon,
.next-icon {
    width:2rem;
    height: 2rem;
    -webkit-transition: all 0.13s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.13s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.13s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.13s cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: pointer;
}

.prev-icon svg,
.next-icon svg {
    fill: #011E36;
    -webkit-transition: all 0.13s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.13s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.13s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.13s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.prev-icon:hover,
.next-icon:hover {
    background-color: #277fd7;
}

.prev-icon:hover svg,
.next-icon:hover svg {
    fill: #fff;
    -webkit-transition: all 0s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slider .prev,
.slider .next,
.progress-timeline-wrapper .prev,
.progress-timeline-wrapper .next {
    width:auto;
    height: auto;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0 0.75rem;
    padding: 0.5rem;
    bottom:0.25rem;
    border-radius: 50%;
    border-width: 0.125rem;
    border-style: solid;
    border-color:#bdbdbd;
    cursor: pointer;
    box-sizing: border-box;
}


.progress-timeline-wrapper,
.progress-timeline,
.progress-timeline-inner {
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.progress-timeline-wrapper {
    width: calc(100% - 2rem);
    justify-content: flex-start;
    align-items: center;
    margin: 1rem auto;
    top:0;
    left: 0;
    right: 0;
    border-radius:0.75rem;
}

.progress-timeline,
.preview-bar {
    width: 100%;
}

.progress-timeline-inner,
.preview-bar-inner {
    width: 100%;
    flex-wrap: nowrap;
    touch-action: pan-y;
}

.progress-bar {
    width: 100%;
    height: 1.25rem;
    position: relative;
    display: flex;
    align-items: flex-start;
    top:0;
    left: 0;
    border-radius:0.75rem;
    background-color: #f2f2f2;
    box-sizing: border-box;
}
.preview-bar .progress-bar {
    align-items: center;
}

.progress {
    width: 0;
    height: 100%;
    position: relative;
    display: block;
    margin:0;
    left: 0;
    top:0;
    bottom:0;
    border-radius: 0.75rem;
    background-color: #277fd7; 
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.timeline-slider .prev,
.timeline-slider .next {
    bottom:2.5rem
}

.timeline-slider .prev {
    left:25%;
}

.timeline-slider .next {
    right: 25%;
}


.progress-timeline-wrapper {
    width: 100%;
    max-width: 30rem;
    margin:2rem auto 3rem;
    padding:0.5rem;
    justify-content: center;
}

.progress-timeline {
    width: calc(100% - 12rem);
    height: auto;
    position: relative;
    margin:auto;
    align-items: center;
}

.progress-timeline-wrapper .next,
.progress-timeline-wrapper .prev {
    position: absolute;
    margin: auto;
    align-self: center;
    top: 0;
    bottom: 0;

}

.progress-timeline-wrapper .next {
    right:0;
}

.progress-timeline-wrapper .prev {
    left:0;
}

.progress-timeline .indicator-container {
    width: 100%;
    position: absolute;
    justify-content: unset;
    padding:0;
    z-index: 1;
}


.progress-timeline .indicator-container .dot,
.preview-bar .indicator-container .dot {
    display: flex;
    position: absolute;
    margin:-0.5rem 0;
    left:0;
    top:0;
    bottom:0;
    background-color:#e1dfdf;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.progress-timeline .indicator-container .dot {
    width: 2.25rem;
    height: 2.25rem;
}

.preview-bar .indicator-container .dot {
    width:1.75rem;
    height: 1.75rem;
}


.preview-bar .indicator-container .dot .caption {
    display: none;
}

.progress-timeline .indicator-container .dot.active,
.preview-bar .indicator-container .dot.active {
    background-color: #277fd7;
}


.progress-timeline .indicator-container .dot.current,
.preview-bar .indicator-container .dot.active {
    transform-origin: center;
    -webkit-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -moz-transform:scale(1.2);
    transform: scale(1.2);
}

.preview-counter,
.preview-counter-inner,
.preview-title,
.article-name,
.article-num,
.page-count {
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.preview-counter {
    width: 100%;
    max-width: 20rem;
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    padding:0.5rem;
    bottom:0;
    left:0;
    right: 0;
    border-width: 0.125rem;
    border-style: solid;
    border-color: #e7e7e7;
    border-radius: 0.75rem;
    background-color: #fff;
    z-index: 1;
    cursor: pointer;
}

.preview-counter-inner {
    width: 100%;
}

.preview-bar-inner {
    display: flex;
    position: relative;
}

.preview-counter .preview-bar {
    width: calc(100% - 3rem);
    position: relative;
    margin: 0.5rem auto;
}

.preview-counter .preview-bar .progress-bar {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: unset;
    right: unset;
}

.preview-bar .indicator-container {
    width: 100%;
    justify-content: flex-start;
}

.preview-counter .indicator-container .dot {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    align-items: unset;
    margin: -0.125rem -0.75rem;
    bottom: unset;
}

.preview-title {
    width: auto;
}

.article-num,
.article-name {
    font-size: 1.25rem;
}

.article-num {
    width: 2.5rem;
    height: 2.5rem;
    margin:auto 0.5rem;
    padding:0.5rem;
    text-align: center;
    border-radius: 50%;
    border-width: 0.125rem;
    border-style: solid;
    border-color: #bdbdbd;
}

.page-count {
    width: auto;
}

.current-num,
.total-num {
    margin:0 0.5rem;
} 


.dot,
.num-label,
.caption,
.preview-title,
.article-name,
.article-num,
.current-num,
.break,
.total-num {
    font-family: proxima-nova, sans-serif;
    font-weight: 400;
    font-style: normal;
}
.dot .num-label {
    font-size: 1.25rem;
}

.circle-progress {
    width:4.75rem;
    height:4.75rem ;
    position: relative; 
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
  
.circle-progress svg {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.progress-ring-bg,
.progress-ring {
    width: 100%;
    height: 100%;
    fill:transparent;
    stroke:#e0e0e0;
    stroke-width: 0.75rem;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}
  
.progress-ring-bg {
    stroke: #f2f2f2;

}
  
.progress-ring {
    stroke: #277fd7;
    stroke-dasharray: 339;
    stroke-dashoffset: 339;
}
  

.circle-progress .page-count {
    width: 100%;
    height: 100%;
    display: none;        
    position: absolute;
    justify-content: center;
    align-items: center;
    margin:auto;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* 
===========================================================================================
================================== Cover Page CSS =========================================
===========================================================================================
*/

.cover {
    height: 100dvh;
    min-height: 100%;
    max-height: 58rem;
    display:flex;
    justify-content:center;
    align-items: center;
    background-color:#1d1e23;
    z-index:1;
}

.profile {
    width: calc(100% - 10rem);
    max-width:52rem;
    height:auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    box-sizing: border-box;
}

.cImage {
    width:50%;
    max-width: 35rem;
    height:auto;
    position:relative;
    display:flex;
    flex-wrap: wrap;
    left:0;
    margin:0 0 0 0;
    box-sizing: border-box;
}

.headshot {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    overflow: hidden;
    border-radius: 100%;
    box-sizing: border-box;
}

.cImage img {
    width: 100%;
    height: auto;
    position: absolute;
    display: block;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    margin: 0 auto;
    align-self: center;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
    z-index: 2;
}

.cImage svg {
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    top:0;
    right: 0;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

.cImage .selfie-bubble {
    display: none;
    fill: #5a5a5a;
    z-index: 1;
}

.selfie-circle {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    bottom: 0;
    left: 0;
    top:0;
    right: 0;
    fill:url('#cirlce-gradient');
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
    z-index: 1;
}

.selfie-ball {
    width:100%;
    height: 100%;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    top:0;
    right: 0;
    border-radius: 50%;
    box-shadow: rgba(103, 0, 255, 0.4) 0px 10px 60px 0px;
    background: linear-gradient(90deg, #0056b3 0%, #69a7cd 100%);
    transform-origin:50% 50%;
    box-sizing: border-box;
    z-index: 1;
}


#cirlce-gradient {
    --color-start: #0e4a75;
    --color-end: #3b5998;
}

#arc-gradient {
    --color-start: #0e4a75;
    --color-middle: #69a7cd;
    --color-end: #00497d;
}

.arc {
    width: 50%;
    height: 100%;
    position: absolute;
    margin:-1.5rem;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
    fill:transparent;
    overflow: initial;
    z-index: 3;
}

.arc-progress {
    stroke:#3b5998;
    stroke-width: 0.05rem;
    stroke-dasharray:25, 100;
	fill: none;
	animation: progress 0.7s ease-out forwards;
	background-color: transparent;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@keyframes progress {
	0% {

		stroke-dasharray: 0, 100;
	}

    50% {
  
        stroke-dashoffset: 12.5, 100;
        stroke-linecap:round;
    }

    100% {

        stroke-dashoffset: 25, 100;
        stroke-linecap:round;
    }
}


.name {
    width:50%;
    height:auto;
    position:relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    right:0;
    margin:0 0 0 0;
    overflow: hidden;
    box-sizing: border-box;
}

.name h1 {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color:white;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.name h2 {
    position: relative;
    display: inline-block;
    color:#8d8d8d;
    -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}


/* 
===========================================================================================
=================================== Case Study Page CSS ===================================
===========================================================================================
*/


.cs-cover .banner {
    width: 100%;
    max-width: 72rem;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    justify-content: space-between;
    overflow: hidden;
    box-sizing: border-box;
}

.cs-cover .selfie-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: auto;
    align-self: center;
    justify-self: center;
}

.cs-cover .banner .left,
.cs-cover .banner .right {
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.cs-cover .banner .left {
    width: 50%;
}

.cs-cover .banner .right {
    width: 50%;
}

.cs-cover img,
.cs-cover .name {
    width: 100%;
}

.cs-cover img {
    z-index: 2;
}

.cs-section:nth-of-type(even) .inner .container {
    flex-direction: row-reverse;
}

.cs-section .left, 
.cs-section .right {
    padding:0 3.25rem;
    overflow: hidden;
}

.cs-section .selfie-circle {
    position: absolute;
}

.cs-section .left .image-container .phone-image,
.cs-section .right .image-container .phone-image {
    width: calc(100% - 8rem);
    max-width: 20rem;
}


/* 
===========================================================================================
=================================== About Page CSS ========================================
===========================================================================================
*/

.skills .brands li {
    width: calc(100%/5 - 2.5rem);
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    padding:4rem 2rem;
    margin:1.25rem;
    border-radius: 0.5rem;
    background-color: #313441;
    box-sizing: border-box;
}

.skills .brands li img,
.skills .brands li svg {
    max-width: 5rem;
    margin:0 auto 1rem;
}

.skills .brands li .skill-bar,
.skills .brands li .skill-level,
.skills .brands li .skill-level-label {
    justify-content: center;
}


.skills .brands li label {
    justify-content: center;
    margin:0 auto 1rem;
    text-align: center;
}

.skills .brands li .skill-bar {
    margin:0 auto;
}

.skills .brands li .skill-level::before {
    content: '';
    width: 0;
    height: 0.25rem;
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    background-color: #0a66c2;
    -webkit-transition: all 0.66s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.66s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.66s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.66s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

.skills .brands li .skill-level-label {
    margin:0 auto;
    color:#fff;
}

.skills .brands li .skill-level .dot {
    -webkit-transition: all 0.66s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.66s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.66s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.66s cubic-bezier(0.645, 0.045, 0.355, 1);
}



.skills .brands li .skill-level .fill {
    border-color: #bdbdbd;
    background-color: transparent;
}

.skills .brands li.hidden-item.show .skill-level .fill {
    border-color: #0a66c2;
    background-color: #0a66c2;
}


/* 
===========================================================================================
================================== Portfolio Page CSS =====================================
===========================================================================================
*/

#projects {
    text-align: center;
}

.filter-menu-wrapper {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:0 auto 2rem;
    box-sizing: border-box;
}

.filter-menu-wrapper .close-button,
.filter-button {
    display: none;
}

.filter-menu {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:0 auto;
    box-sizing: border-box;
}


.filter-menu ul {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    box-sizing: border-box;
}

.filter-menu li {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:0 1rem;
    font-size: 1.25rem;
    color:#bdbdbd;
    cursor: pointer;
    box-sizing: border-box;
}

.filter-menu li::after {
    content: '';
    width: 0;
    height: 0.125rem;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #bdbdbd;
    -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translate(0, 0.125rem);
    -moz-transform: translate(0, 0.125rem);
    transform: translate(0, 0.125rem);
    box-sizing: border-box;
}

.filter-menu li:hover,
.filter-menu li.active {
    color:#fff;
}

.filter-menu li:hover::after,
.filter-menu li.active::after {
    width: 100%;
    background-color: #fff;
}


.project-container {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box;
}

.project-item {
    width: calc(100%/3 - 2rem);
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:1rem; 
    border-width: 0.125rem;
    border-style: solid;
    border-color: #bdbdbd;
    border-radius: 0.625rem;
    box-sizing: border-box;

}

.project-item > a {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem 0.5rem 0 0;
    box-sizing: border-box;
    cursor: pointer;
}

.project-item img {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    align-items: center;
    align-self: flex-start;
    object-fit: cover;
    border-radius: 0.5rem 0.5rem 0 0;
    box-sizing: border-box;
}

.project-item .description {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 0 0 0.5rem 0.5rem;
    color: #fff;
    background-color: #313441;
    box-sizing: border-box;
}

.project-item .description .heading {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
}

.project-item .description .heading h4 {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0;
    padding:1rem 0.5rem;
    text-align: center;
    box-sizing: border-box;
}

.project-item .description ul {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    border-radius: 0 0 0.625rem 0.625rem;
    box-sizing: border-box;
}

.project-item .description ul li {
    width: calc(100%/2 - 0.125rem);
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:0;
    line-height: unset;
    box-sizing: border-box;
}

.project-item .description ul li .btn {
    width: calc(100% - 0.25rem);
    justify-content: space-between;
    padding:1rem;
}

.project-item .description ul li:nth-of-type(1) {
    margin:0 auto 0 0;
}

.project-item .description ul li:nth-of-type(2) {
    margin:0 0 0 auto;
}


.project-item .description ul li:nth-of-type(1) .btn {
    border-radius: 0 0 0 0.625rem;
}

.project-item .description ul li:nth-of-type(2) .btn {
    border-radius: 0 0 0.625rem 0;
}

.project-item .description ul li:nth-of-type(1) .btn::before {
    border-radius: 0 0.625rem 0 0.625rem;
}

.project-item .description ul li:nth-of-type(2) .btn::before {
    border-radius: 0 0 0.625rem 0;
}

.project-item .description ul li:nth-of-type(1) .btn:hover::before {
    border-radius: 0 0 0 0.625rem;
}

.project-item .description ul li:nth-of-type(2) .btn:hover::before {
    border-radius: 0 0 0.625rem 0;
}

.project-item .arrow-link {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 0.5rem 0.5rem;
    box-sizing: border-box;
}

.project-item .arrow-link::before {
    border-radius: 0 0.5rem 0 0.5rem;
}


.project-item a.arrow-link:hover::before {
    border-radius: 0 0 0.5rem 0.5rem;
}

.load-more {
    margin:2rem auto 1rem;
}

.project-item.active {
    display: flex;
}

.project-item.inactive,
.project-item.hidden {
    display: none;
}

/* 
===========================================================================================
================================== Resume Page CSS ========================================
===========================================================================================
*/


.row {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:0 0 1rem;
    box-sizing: border-box;
}

.row:last-of-type {
    margin:0;
}

.column {
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    padding:1.5rem 2rem;
    box-sizing: border-box;
}

.column:nth-of-type(1) {
    width: calc(35% - 0rem);
}

.column:nth-of-type(2) {
    width: calc(65% - 0rem);
    padding: 1.75rem 2rem;
}

.contact-info {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:1.5rem auto 1rem;
    box-sizing: border-box;
}

.contact-info ul {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.contact-info ul li {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content:space-between;
    margin:0 1rem 1rem;
    box-sizing: border-box;
}

.contact-info ul li a {
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

.contact-info ul li svg {
    width: 1.25rem;
    height:1.25rem;
    fill:#fff;
}

.contact-info ul li .icon-bg {
    margin: 0 0.5rem 0 0;
}

.contact-info ul li label {
    width: calc(100% - 1.75rem);
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color:#fff;
    cursor: pointer;
}

.resume-wrapper {
    width: 100%;
    max-width: 1200px;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:1rem auto;
    border-width: 0.125rem;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.025);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    background-color: #fff;
    box-sizing: border-box;
}

.resume-wrapper .heading {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin:0 0 1rem;
    padding:0.5rem 0.75rem;
    background-color: #0b2435;
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
    box-sizing: border-box;
}

.resume-wrapper .heading svg {
    width: 2rem;
    height: 2rem;
    position: relative;
    display: block;
    margin:0 0.66rem 0 0;
    fill:#fff;
    box-sizing: border-box;
}

.resume-wrapper .heading h3 {
    width: calc(100% - 3rem);
    position: relative;
    margin:0;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}


.resume-header {
    width: 100%;
    height:auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background-color: #0b2435;
    border-radius: 0.5rem 0.5rem 0 0;
    box-sizing: border-box;
}

.resume-header .row:first-of-type {
    margin:0;
}


.profile-picture {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1.5rem 2rem 0; 
    z-index: 1;
}


.profile-picture .container {
    align-items: center;   
    justify-content: center;

}

.profile-picture::before,
.occupation::before {
    content: '';
    width: 100%;
    height: 3rem;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    background-color: #0b2435;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    box-sizing: border-box;
    z-index: 1;
}

.occupation::before {
    display: none;
}

.profile-picture img {
    width: 100%;
    max-width: 14rem;
    height: auto;
    position: relative;
    display: block;
    box-sizing: border-box;
}

.occupation {
    margin:auto;
}

.occupation .title {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #fff;
    box-sizing: border-box;
}

.occupation h2,
.occupation h3 {
    width: 100%;
}

.occupation h2 {
    margin:0.5rem 0 1rem;
    font-size: 4rem;
    line-height: 4rem;
}

.resume-wrapper .item.contact-info {
    width: auto;
    margin:1.5rem auto 1rem;
}

.resume-wrapper .item.contact-info ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.resume-wrapper .item.contact-info ul li {
    justify-content:space-between;
    margin:0.5rem auto;

}

.resume-wrapper .item.contact-info ul li a {
    width:100%;
}

.resume-wrapper .item.contact-info ul li svg {
    width: 1.25rem;
    height:1.25rem;
    fill:#fff;
}

.resume-wrapper .item.contact-info ul li .icon-bg {
    padding: 0.5rem;
    background-color: #0a66c2;
    border-radius: 100%;
}


.resume-wrapper .item.contact-info ul li label {
    width: calc(100% - 2.75rem);
    justify-content: flex-start;
    margin:0 0 0 auto;
    color:#fff;
    text-align: left;
}

.puzzle-icon {
    stroke: #0b2435;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1rem;
}

.resume-wrapper .item .brands {
    justify-content:space-evenly;
}


.resume-wrapper .item .brands li {
    width: calc(100%/4 - 2.5rem);
    max-width: 3.125rem;
    margin: 1rem 1.25rem;
}

.interests ul li {
    width: calc(100%/6 - 3rem);
    margin: 1rem 1.5rem;
}

.interests ul li svg {
    width: 2.5rem;
    height:2.5rem;
    fill:#0b2435;
}

.interests ul li label {
    color:#0b2435;
}

.resume-wrapper .item .diamond-list {
    width: calc(100% - 1rem);
    height: auto;
    position: relative;
    margin:0 0 0 1rem;
}

.resume-wrapper .item .diamond-list li {
    width:100%;
    position: relative;
    align-items:flex-start;
    justify-content: space-between;
    padding:0 0 0 1.5rem;
    margin:0 0 1rem;
    font-size: 1.25rem;
    list-style-type:none;
    box-sizing: border-box;
}

.resume-wrapper .item .diamond-list li::after {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    position: absolute;
    display: block;
    top:0.66rem;
    left:0;
    background-color: #0a66c2;
    -webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
    box-sizing: border-box;
}

.resume-body .column:nth-of-type(1) {
    border-radius: 0 0 0.5rem 0.5rem;
    background-color: #17374d;
}

.resume-body .item ul li label {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem auto;
    font-size: 1rem;
    text-align: center;
    box-sizing: border-box;
}

.resume-body .column:nth-of-type(1) label {
    color:#fff;
}

.resume-body .column:nth-of-type(1) .diamond-list li {
    color:#fff;
}

.timeline {
    width:100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:1rem 0;
    box-sizing: border-box;

}

.timeline:after {
    content: "";
    width: 0.25em;
    height: auto;
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 1.6rem;
    z-index: 1;
    background-color: #0a66c2;
}

.timeline .row {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 2rem;
    box-sizing: border-box;
}

.timeline .row:last-of-type {
    margin: 0;
}

.timeline .row .year {
    width: auto;
    max-width: 9rem;
    height: auto;
    position: absolute;
    display: block;
    margin: 0 0.5rem;
    padding: 0.5rem;
    top: 0;
    right: 0.5rem;
    font-family:'Roboto', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    text-align: right;
    border-radius: 0.5rem;
    color: #fff;
    background-color: #0a66c2;
    box-sizing: border-box;
}

.timeline .summary {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    margin: 0 0 0 4rem;
    text-align: left;
    box-sizing: border-box;
}


.timeline .summary::after {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    display: block;
    top: 0.5rem;
    left: -3rem;
    border-width: 0.25rem;
    border-color: #0a66c2;
    border-style: solid;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 2;
}

.timeline .summary .heading {
    width: calc(100% - 9.5rem);
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin:0 0 0.5rem;
    justify-content: space-between;
    background-color: transparent;
    box-sizing: border-box;
}

.timeline .summary .heading::after {
    display: none;
}

.timeline .summary .title,
.timeline .summary .company {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    box-sizing: border-box;
}

.timeline .summary .title {
    margin:0 0 0.5rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color:#0a66c2;
}

.timeline .summary .company {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    font-style: italic;
    color:#353535;
}

.timeline .summary ul {
    width: calc(100% - 2rem);
    height: auto;
    position: relative;
    margin:0 0 0 1rem;
}

.timeline .summary ul li {
    display: list-item;
    margin:1rem 0;
    list-style-type: square;
}

.education.item {
    margin:2.5rem auto 0;
}


/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/


#contact .contact-info {
    width: 100%;
    max-width: 1200px;
    height: auto;
    justify-content: center;
    margin: 0 auto;
}

#contact .contact-info ul {
    justify-content: center;
}

#contact .contact-info ul li {
    width: calc(100%/3 - 2rem);
    margin:0 1rem 2rem;
}


#contact .contact-info ul li a {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
    padding:5rem 1.5rem;
    border-radius: 0.5rem;
    background-color: #0a66c2;
}

#contact .contact-info ul li .icon-bg {
    width: auto;
    height: auto;
    margin: 0 auto 2rem;
    padding:0;
    background-color: transparent;
}

#contact .contact-info ul li label {
    text-align: center;
}    

#contact .contact-info ul li svg {
    width: 5rem;
    max-width: unset;
    height: 5rem;
}

#contact .contact-info ul li a:hover {
    background-color: #fff;
}

#contact .contact-info ul li a:hover svg,
#contact .contact-info ul li a:hover .icon-bg svg {
    fill: #0a66c2;
}

#contact .contact-info ul li a:hover label {
    color: #0a66c2;
}



/* 
===========================================================================================
============================== Information Dropdowns/FAQS CSS =============================
===========================================================================================
*/

.accordion-container,
.accordion,
.accordion-heading,
.accordion-body {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.accordion-heading,
.accordion-body {
    padding:1rem;
    background-color: #fff;
}

.accordion-heading {
    justify-content: space-between;
    align-items: center;
    border-radius: 0.5rem;
}

.accordion-body {
    display: none;
    border-radius: 0 0 0.5rem 0.5rem;
}

.accordion.active .accordion-heading {
    border-radius: 0.5rem 0.5rem 0 0;
    color: #fff;
    background-color: #011E36;
}

.accordion.active .accordion-heading .plus-sign .vertical-line {
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    transform: scaleY(0);
}

.accordion.active .accordion-heading .plus-sign .horizontal-line {
    fill: #fff;
}

.accordion.active .accordion-body {
    display: flex;
}




/* 
===========================================================================================
================================== FORM Universal CSS =====================================
===========================================================================================
*/


.form-wrapper {
    width: 100%;
    max-width: 900px;
    height: auto;
    position: relative;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin:2rem auto 1rem;
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    box-sizing: border-box;
}

.form {
    width: 100%;
    height: auto;
    position: relative;
    display:flex;
    flex-wrap:wrap;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    color: #222222;
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    overflow: hidden;
    box-sizing: border-box;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    background-color: white !important;
}

.form input,
.form select,
.form textarea {
    height: auto;
    position: relative;
    padding:0.5rem 1rem;
    border-width:0.0125rem;
    border-style: solid;
    border-color: rgba(128, 128, 128, 0.75);
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    color: #222222;
    box-sizing: border-box;
    -webkit-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text;
    user-select: text; 
}

.form input,
.form select,
.form option,
.form textarea {
    width:100%;
}

.form textarea {
    height: 8.75rem;
    resize: none;
}

.form .row {
    width:100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:0 auto 2rem;
    box-sizing: border-box;
}


.form .row.message-area {
    width: 100%;
    margin:0 0 2rem;
}

.form .row label {
    width: 100%;
    display: block;
    margin: 0.5rem 0;
    text-align: left;
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.125rem;
    color:#fff;
}


.form .row .btn {
    width: 100%;
    margin:1rem auto 2rem;
    font-size: 1.125rem;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    outline: none;
    cursor: pointer;
}

.error {
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.125rem;
    color:#e70a0a;
}

.valid {
    color:#169c16;
}

.invalid {
    color:#e70a0a;
}

.valid input {
    border-color:#169c16;
}

.invalid input {
    border-color:#e70a0a;
}

.notice {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    bottom:0;
    left: 0;
    right: 0;
    padding:1rem;
    border-radius:0.5rem 0.5rem 0 0;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    transform: translate(0, 100%);
    z-index: 1;
    background-color: #54B689;
    box-sizing: border-box;
}

.notice svg {
    width: 4.5rem;
    height: 4.5rem;
    position: relative;
    display: block;
    margin:1rem auto 1.75rem;
    box-sizing: border-box;
}

.notice h3 {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    margin: 0 auto 1rem;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
}

.notice h4 {
    color: #fff;
}

.notice p {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: #fff;
}

.notice.reveal {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);

}

.check-icon .background-circle {
    fill: #fff;
}

.check-icon .ring {
    fill:#0a66c2;
}

.check-icon .check-mark {
    fill:#0a66c2;
}
  

/* 
===========================================================================================
=================================== Chat Widget CSS =======================================
===========================================================================================
*/


.chat-widget-wrapper,
.chat-widget,
.chat-widget-header,
.chat-widget-body,
.chat-widget-section {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.chat-widget-wrapper,
.chat-widget,
.chat-widget-header,
.chat-widget-body {
    position: relative;
}

.chat-widget-header,
.chat-widget-body,
.chat-widget-section {
    border-radius: 0.5rem 0.5rem 0 0;
}

.chat-widget svg {
    fill: #0b2435;
}

.chat-widget-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    justify-content: flex-start;
    align-items: flex-start;
    right:0;
    bottom:0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    transform-origin: bottom right;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 4;
}

.chat-widget-wrapper::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    z-index: 3;
}

.chat-widget {
    max-width: 25rem;
    position: absolute;
    justify-content: flex-start;
    align-items: flex-start;
    right:1.5rem;
    bottom:5.5rem;
    border-width: 0.125rem;
    border-style: solid;
    border-color:rgba(77, 77, 77, 0.5);
    border-radius: 0.625rem;
    -ms-box-shadow: 0.1875rem 0.1875rem 1rem rgba(77, 77, 77, 0.5);
    -webkit-box-shadow: 30.1875rem 0.1875rem 1rem rgb(77 77 77 / 50%);
    -moz-box-shadow: 0.1875rem 0.1875rem 1rem rgba(77, 77, 77, 0.5);
    box-shadow: 0.1875rem 0.1875rem 1rem rgb(77 77 77 / 50%);
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    overflow: hidden;
    z-index: 4;
}

.chat-widget-button {
    width:3rem;
    height: 3rem;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 1.5rem;
    bottom:1.5rem;
    padding: 0.66rem;
    border-radius: 100%;
    background-color: #0a66c2;
    box-sizing: border-box;
    z-index: 5;
}

.chat-widget-button svg {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    display: block;
    margin: auto;
    fill:#fff;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

.chat-widget-button .open {
    right: unset;
    top:unset;
    left: unset;
}

.chat-widget-button .close-icon line {
    fill: none;
    stroke-width: 5.2094;
    stroke-miterlimit: 10;
    stroke-dasharray: 68;
    stroke-dashoffset: 68;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.chat-widget .close-button {
    width: 2rem;
    height: 2rem;
    position: absolute;
    display: none;
    padding: 0.25rem;
    top:0.5rem;
    right: 1rem;
    background-color: #001E36;
    border-radius: 0.5rem;
    box-sizing: border-box;
    z-index: 4;
}

#chat-widget-trigger:checked ~ .chat-widget-wrapper {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 6;
    pointer-events: auto;
}

#chat-widget-trigger:checked ~ .chat-widget-button {
    z-index: 7;
}

#chat-widget-trigger:checked ~ .chat-widget-button .open {
    fill: transparent;
}

#chat-widget-trigger:checked ~ .chat-widget-button .close-icon line {
    stroke-dashoffset: 0;
    stroke:#fff;
}

.chat-widget-body {
    height: calc(100vh - 10.5rem);
    min-height: 16rem;
    max-height: 36rem;
    overflow-y: auto;
    overflow-x: hidden;
    background-color:#f2f2f2;
}

.chat-widget-body::-webkit-scrollbar {
    width: 0.5rem;
    border-radius: 0 0.5rem 0 0;
}

.chat-widget-body::-webkit-scrollbar-thumb {
    background-color: #9292a1;
    border-radius: 0 0.5rem 0 0;
}

.chat-widget-body::-webkit-scrollbar-track {
    background-color:#bdbdbd;
    border-radius: 0 0.5rem 0 0;
}

.chat-widget-body::before {
    content: '';
    width: 100%;
    height: auto;
    min-height: 15rem;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(315deg, #1a73e8 3%, rgba(60, 132, 206, 1) 38%, rgb(38 110 223) 68%, rgb(54 157 199) 98%);
    animation: gradient 15s ease infinite;
    background-size: cover;
    background-attachment: fixed;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.wave-effect {
    width: 100%;
    height: 15rem;
    position: absolute;
    top:0;
    left: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.wave {
    width: 200%;
    height: 10rem;
    position: absolute;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;  
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
}

.wave:nth-of-type(2) {
    bottom: -1.25rem;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5rem;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}

.chat-widget-section {
    height: auto;
    position: absolute;
    display: none;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex-grow: 1;
    top:0;
    left: 0;
    padding:2rem 1.5rem 1.5rem;
    z-index: 1;
}

.chat-widget-section.active {
    display: flex;
}

.chat-widget-section > .heading {
    justify-content: center;
    margin:0 auto 1rem;
    text-align: center;
}

.chat-widget-section > .heading h3,
.chat-widget-section > .heading h4 {
    color:#fff;
}

.chat-widget .card {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin:0.75rem auto;
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
    -ms-box-shadow: 0.1875rem 0.1875rem 1rem rgba(77, 77, 77, 0.5);
    -webkit-box-shadow: 30.1875rem 0.1875rem 1rem rgb(77 77 77 / 50%);
    -moz-box-shadow: 0.1875rem 0.1875rem 1rem rgba(77, 77, 77, 0.5);
    box-shadow: 0.1875rem 0.1875rem 1rem rgb(77 77 77 / 50%);
}

.chat-widget-section .card .heading {
    width: 100%;
    margin: 0 0 0.125rem;
    color: #383838;
    font-family: proxima-nova, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    font-style: normal;
}

.chat-widget .btn {
    width: 100%;
    max-width: unset;
    justify-content: center;
    margin:0.5rem auto;
    padding: 0.5rem 0.75rem;
    color: #fff;
    background-color: #0a66c2;
}

.chat-widget .btn::before {
    display: none;
}

.chat-widget-nav {
    width: 100%;
    position: relative;
    top:unset;
    bottom:0;
    align-self: flex-end;
    border-radius:0 0 0.5rem 0.5rem;
    border-width: 0.0125rem;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 1.5625rem;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
}

.chat-widget-nav ul {
    width: 100%;
}

.chat-widget-nav ul li {
    width: calc(100%/3 - 0rem);
    margin: 0;
}

.chat-widget-nav ul li a {
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-family: proxima-nova, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color:#0b2435;
    text-align: center;
}

.chat-widget-nav ul li a svg {
    width: 1.25rem;
    height: auto;
    margin:0 auto 0.5rem;
    fill: #0b2435;
}

.chat-widget-nav ul li a:hover,
.chat-widget-nav ul li a.active {
    color:#0a66c2;
}

.chat-widget-nav ul li a:hover svg,
.chat-widget-nav ul li a.active svg {
    fill: #0a66c2;
}

.chat-widget-nav ul li a:hover::after, 
.chat-widget-nav ul li a.active::after {
    width: 0;
}

.chat-widget-section ul {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    list-style-position: inside;
    box-sizing: border-box;
}

.chat-widget-section ul li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin:0 0 0.75rem;
    box-sizing: border-box;
}

.chat-widget-section ul li a {
    font-family: proxima-nova, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    color:#001E36;
}

.chat-widget-section .heading {
    margin:0 0 0.125rem;
    color:#383838;
    font-weight: 600;
}

.quick-links li {
    list-style-type: none;
}

.quick-links .address {
    padding: 0;
}


.quick-links .address .heading {
    padding:1rem 1rem 0;
}

.quick-links .address > ul {
    padding: 1rem;
}

.quick-links .address ul li:last-child {
    margin:0;
}

.quick-links .address ul li strong {
    margin:0 0.25rem 0 0;
}

.quick-links .social {
    width: 100%;
    margin:0.5rem 0 0;
}

.quick-links .social ul li {
    width: auto;
    margin:0 1rem 0 0;
}

.quick-links .map {
    height: 16rem;
}

.map,
.map iframe {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    box-sizing: border-box;
}

.map {
    overflow: hidden;
}

.map iframe {
    height: 100%;
    z-index: 1;
}

.chat-widget .form .row {
    margin: 0 auto 0.5rem;
}

.chat-widget  .form .row label {
    color: #383838;
    font-family: proxima-nova, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    font-style: normal;
}

.chat-widget-section .accordion.card {
    padding: 0;
}

.chat-widget .accordion ul {
    list-style-position: inside;
}

.chat-widget .accordion ul li {
    display: list-item;
    list-style-type: disc;
}

.chat-widget .accordion .accordion-heading label {
    width: calc(100% - 1.5rem);
}

.chat-widget .accordion .accordion-heading svg {
    width: 1rem;
    height: 1rem;
    margin:0 0 0 0.5rem;
}

.chat-widget .accordion.active .accordion-heading {
    color: #fff;
}

/*
====================================================================================================
=====================================                ===============================================
=====================================  Media Queries ===============================================
=====================================                ===============================================
====================================================================================================
*/

@media all and (min-width:2199px) and (max-width: 2599px) {


/* 
===========================================================================================
===================================== Cover CSS ===========================================
===========================================================================================
*/

    .profile {
        max-width: 82.5rem;
    }
}

@media all and (min-width:1899px) and (max-width: 2198px) {


/* 
===========================================================================================
===================================== Cover CSS ===========================================
===========================================================================================
*/

    .profile {
        max-width: 72.5rem;
    }
}

@media all and (min-width:1699px) and (max-width: 1898px) {


/* 
===========================================================================================
===================================== Cover CSS ===========================================
===========================================================================================
*/

    .profile {
        max-width: 62.5rem;
    }
}

@media all and (min-width:1499px) and (max-width: 1698px) {


    h1,
    .name h1,
    .occupation h1 {
        font-size:3.125rem ;
    }

    h2,
    .name h2,
    .occupation h2 {
        font-size: 2.5rem;
    }

    h3,
    .resume-wrapper .heading h3 {
        font-size:1.75rem;
    }

    h4 {
        font-size: 1.25rem;
    }



/* 
===========================================================================================
===================================== Main CSS ===========================================
===========================================================================================
*/

    



/* 
===========================================================================================
=================================== About Page CSS ========================================
===========================================================================================
*/

    .skills .brands li {
        width: calc(100%/5 - 1rem);
        margin:0 0.5rem 1rem;
        padding:2.5rem 1rem;
    }

    .skills .brands li label {
        font-size: 1.125rem;
    }

    .skills .brands li img, 
    .skills .brands li svg {
        max-width: 4.5rem;
    }


    
/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/

    #contact .contact-info {
        margin: 0 auto;
    }

    #contact .contact-info ul li a {
        padding: 4.25rem 1.5rem;
    }

    #contact .contact-info ul li a svg {
        width: 3.75rem;
        height: 3.75rem;
    }

    #contact .contact-info ul li label {
        font-size: 1.25rem;
    }


    
/* 
===========================================================================================
================================== Chat Widget CSS ========================================
===========================================================================================
*/

    .chat-widget-body {
        height: calc(100vh - 12.5rem);
    }


}

@media all and (min-width:1299px) and (max-width: 1498px) {


    h1,
    .name h1,
    .occupation h1 {
        font-size:2.95rem ;
    }

    h2,
    .name h2,
    .occupation h2 {
        font-size: 2.25rem;
    }

    h3,
    .resume-wrapper .heading h3 {
        font-size:1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }



/* 
===========================================================================================
===================================== Main CSS ===========================================
===========================================================================================
*/

    #cover {
        max-height: 52rem;
    }



/* 
===========================================================================================
=================================== About Page CSS ========================================
===========================================================================================
*/

    .skills .brands li {
        width: calc(100%/5 - 1rem);
        margin:0 0.5rem 1rem;
        padding:2.5rem 1rem;
    }

    .skills .brands li label {
        font-size: 1rem;
    }

    .skills .brands li img, 
    .skills .brands li svg {
        max-width: 4rem;
    }


    
/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/

    #contact .contact-info {
        margin: 0 auto;
    }

    #contact .contact-info ul li a {
        padding: 4.25rem 1.5rem;
    }

    #contact .contact-info ul li a svg {
        width: 3rem;
        height: 3rem;
    }

    #contact .contact-info ul li label {
        font-size: 1.25rem;
    }

    
/* 
===========================================================================================
================================== Chat Widget CSS ========================================
===========================================================================================
*/

    .chat-widget-body {
        height: calc(100vh - 12.5rem);
    }


}

@media all and (min-width:1023px) and (max-width: 1298px) {


    h1,
    .name h1,
    .occupation h1 {
        font-size:2.75rem ;
    }

    h2,
    .name h2,
    .occupation h2 {
        font-size: 2.125rem;
    }

    h3,
    .resume-wrapper .heading h3 {
        font-size:1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }


/* 
===========================================================================================
===================================== Main CSS ===========================================
===========================================================================================
*/

    #cover {
        max-height: 48rem;
    }

    .profile {
        width:calc(100% - 3.25rem);
        max-width: 48rem;
    }


/* 
===========================================================================================
=================================== About Page CSS ========================================
===========================================================================================
*/

    .skills .brands li {
        width: calc(100%/4 - 1rem);
        margin:0 0.5rem 1rem;
        padding:2.5rem 1rem;
    }

    .skills .brands li label {
        font-size: 1rem;
    }

    .skills .brands li img, 
    .skills .brands li svg {
        max-width: 3.5rem;
    }


/* 
===========================================================================================
================================== Resume Page CSS ========================================
===========================================================================================
*/

    .resume-wrapper {
        max-width: 900px;
    }


    .resume-header .column:nth-of-type(1),
    .resume-header .column:nth-of-type(2) {
        width: 100%;
    }

    .resume-wrapper .resume-header .profile-picture {
        padding:2rem 2rem 0 !important;
    }


    .resume-body .column:nth-of-type(1),
    .resume-body .column:nth-of-type(2) {
        width: 100%;
    }

    .resume-wrapper .item.contact-info ul li {
        width: calc(100%/2 - 2rem);
        margin:0 auto 2rem;
    }

    .profile-picture::before {
        display: none;
    }

    .occupation::before {
        display: block;
        height: 1.25rem;
    }


    .occupation .title {
        text-align: center;
    }


/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/

    #contact .contact-info {
        max-width: 900px;
        margin: 0 auto;
    }

    #contact .contact-info ul li a {
        padding: 3.75rem 1.75rem;
    }

    #contact .contact-info ul li a svg {
        width: 2rem;
        height: 2rem;
    }

    #contact .contact-info ul li label {
        font-size: 1.25rem;
    }

    
/* 
===========================================================================================
================================== Chat Widget CSS ========================================
===========================================================================================
*/


    #chat-widget-trigger:checked ~ .chat-widget-button,
    .chat-widget-wrapper,
    .chat-widget-button,
    .chat-widget {
        z-index: 5;
    }

    .chat-widget {
        bottom:1.5rem;
    }

    .chat-widget .close-button {
        display: flex;
    }

    .chat-widget-body {
        height: calc(100vh - 12.5rem);
    }


}

@media all and (max-width: 1022px) {
/* 
===========================================================================================
=================================== Header CSS ============================================
===========================================================================================
*/

    
    header,
    .sticky {
        width: 100%;
        justify-content:space-between;
        background-color:#1d1e23;
        z-index: 6;
    }


    .logo-wrapper {
        margin:1rem;
    }

    .sticky .logo {
        fill: #fff;
    }    

    #hmbg {
        display: flex;
        margin:0;
    }

    .nav-wrapper {
        width: 100%;
        height: 100dvh;
        position: fixed;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        align-items: unset;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        -moz-transform: translate(100%, 0);
        transform: translate(100%, 0);
        background-color: #313441;
        overflow-y: auto;
        z-index: 2;
    }

    header::after {
        content: '';
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        background-color: rgba(0,0,0,0.6);
        -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        -moz-transform: translate(100%, 0);
        transform: translate(100%, 0);
        -webkit-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        -moz-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        z-index: 1;
    }

    .nav-wrapper::-webkit-scrollbar {
        width: 0.25em;
    }

    .nav-wrapper::-webkit-scrollbar-thumb {
        background-color: #69696a;
    }

    .nav-wrapper::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

    .main-nav {
        width: 100%;
        position: relative;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        align-items: unset;
        margin:0 auto;
        padding:5.25rem 0.125rem 1rem;
        top:unset;
        right: unset;
        
    }

    .main-nav ul {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .main-nav ul li {
        width: 100%;
        flex-wrap: nowrap;
        margin: 0;
        border-width: 0;
        border-style: solid;
        border-color: #3b424d;
    }

    .main-nav ul li a,
    .theme-color-switch .main-nav ul li a {
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: #bdbdbd;
        padding: 0.75em 1em 0.75em 0.75em;
    }

    .main-nav ul li a::after,
    .theme-color-switch .main-nav ul li a {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .main-nav ul li a:hover,
    .main-nav ul li a.active,
    .main-nav ul li a.active:hover, 
    .theme-color-switch .main-nav ul li a:hover,
    .theme-color-switch .main-nav ul li a.active,
    .theme-color-switch .main-nav ul li a.active:hover {
        color:#fff;
        background-color: #4b87bf;
    }

    .main-nav ul li a.active::after,
    .main-nav ul li a:hover::after,
    .theme-color-switch .main-nav ul li a:hover::after, 
    .theme-color-switch .main-nav ul li a.active::after {
        width: 0.33rem;
        height: 100%;
        top:0;
        background-color: #fff;
    }

    .social-media-wrapper {
        width: 100%;
        height: auto;
        position: relative;
        align-items: unset;
        align-self: flex-end;
        top:unset;
        left: unset;
        bottom:unset;
        margin: 0;
    }

    .social-media {
        width: 100%;
        flex-direction: unset;
        margin:0;
    }

    .social-media ul {
        width: 100%;
        flex-wrap: wrap;
        flex-direction: unset;
    }

    .social-media ul li {
        align-items: center;
        margin: 0;
    }

    .social-media ul li a,
    .theme-color-switch .social-media ul li a {
        width: 100%;
        justify-content: center;
    }
    
    .nav-wrapper .social-media ul li a,
    .theme-color-switch .nav-wrapper .social-media ul li a {
        border-radius: unset;
    }

    .nav-wrapper .social-media ul li a svg,
    .nav-wrapper .theme-color-switch .social-media ul li a svg {
        fill:#bdbdbd;
    }

    .social-media .facebook a,
    .social-media .facebook a:hover,
    .theme-color-switch .social-media .facebook a {
        background-color:#3b5998;
    }
    
    .social-media .instagram a,
    .social-media .instagram a:hover,
    .theme-color-switch .social-media .instagram a {
        background-color:#4b87bf;
    }
    
    .social-media .linkedin a,
    .social-media .linkedin a:hover,
    .theme-color-switch .social-media .linkedin a {
        background-color:#0a66c2;
    }
    
    .social-media .dribbble a,
    .social-media .dribbble a:hover
    .theme-color-switch .social-media .dribbble a {
        background-color:#ea4c89;
    }

    .social-media ul li a:hover svg,
    .theme-color-switch .social-media ul li a:hover svg {
        fill: #fff;
    }



/* 
===========================================================================================
=================================== Chat Widget CSS =======================================
===========================================================================================
*/
    #chat-widget-trigger:checked ~ .chat-widget-button,
    .chat-widget-wrapper,
    .chat-widget-button,
    .chat-widget {
        z-index: 5;
    }

/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/


    #contact .contact-info ul li .icon-bg {
        margin:0 auto 1rem;
    }


}

@media all and (min-width:765px) and (max-width: 1022px) {


    h1,
    .name h1,
    .occupation h1 {
        font-size:2.25rem ;
    }

    h2,
    .name h2,
    .occupation h2 {
        font-size: 1.85rem;
    }

    h3,
    .resume-wrapper .heading h3 {
        font-size:1.5rem;
    }

    h4 {
        font-size: 1.125rem;
    }


/* 
===========================================================================================
=================================== Header CSS ============================================
===========================================================================================
*/

    .nav-wrapper {
        max-width: 22.5rem;
    }


    .nav-wrapper .social-media ul li {
        width: calc(100%/4 - 0rem);
    }


    .nav-wrapper .social-media ul li a {
        padding:2.5rem 1.5rem;
    }




/* 
===========================================================================================
===================================== Main CSS ===========================================
===========================================================================================
*/

    #cover {
        max-height: 45rem;
    }

    .profile {
        width:calc(100% - 2rem);
        max-width: 45rem;
    }

    .section {
        padding:4rem 1.5rem 2rem;
    }


/* 
===========================================================================================
=================================== About Page CSS ========================================
===========================================================================================
*/

    .skills .brands li {
        width: calc(100%/3 - 1rem);
        margin:0 0.5rem 1rem;
        padding:2.5rem 1rem;
    }

    .skills .brands li label {
        font-size: 1rem;
    }

    .skills .brands li img, 
    .skills .brands li svg {
        max-width: 3.5rem;
    }



/* 
===========================================================================================
================================== Portfolio Page CSS =====================================
===========================================================================================
*/

    .project-item .arrow-link {
        height: 2.5rem;
    
    }


/* 
===========================================================================================
================================== Resume Page CSS ========================================
===========================================================================================
*/


    .resume-wrapper {
        width: calc(100% - 4.875rem);
        max-width:780px;
    }

    .resume-header .column:nth-of-type(1),
    .resume-header .column:nth-of-type(2) {
        width: 100%;
        padding:2rem 1rem;
    }

    .resume-wrapper .resume-header .profile-picture {
        padding:2rem 2rem 0;
    }


    .resume-body .column:nth-of-type(1),
    .resume-body .column:nth-of-type(2) {
        width: 100%;
        padding:2rem 1rem;
    }

    .resume-wrapper .item.contact-info ul li {
        width: calc(100%/2 - 2rem);
        margin:0 auto 2rem;
    }

    .profile-picture::before {
        display: none;
    }

    .occupation::before {
        display: block;
        height: 1.25rem;
    }


    .occupation .title {
        text-align: center;
    }

/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/

    #contact .contact-info {
        max-width: 780px;
        margin: 0 auto;
    }

    #contact .contact-info ul li a {
        padding: 3.75rem 1.5rem;
    }

    #contact .contact-info ul li a svg {
        width: 2rem;
        height: 2rem;
    }

    #contact .contact-info ul li label {
        font-size: 1.25rem;
    }



/* 
===========================================================================================
================================== Chat Widget CSS ========================================
===========================================================================================
*/


    .chat-widget {
        bottom:1.5rem;
    }

    .chat-widget .close-button {
        display: flex;
    }

    .chat-widget-body {
        height: calc(100vh - 12.5rem);
    }


}

@media all and (max-width: 764px) {



/* 
===========================================================================================
===================================== Cover CSS ===========================================
===========================================================================================
*/


    #cover {
        align-items: center;
        padding:1.5rem;
    }

    .profile {
        width:100%;
        flex-direction: column;
        justify-content: center;
    }

    .cImage {
        width:calc(100% - 3rem);
    }

    .cImage,
    .cs-cover .banner {
        max-width: 36rem;
    }

    .name {
        width: 100%;
        position: relative;
        margin:0;
        text-align: center;
    }

    .section {
        padding:4rem 1.5rem 1.5rem;
    }

    .left,
    .right {
        width: 100%;
    }


/* 
===========================================================================================
================================= Slider Style CSS ========================================
===========================================================================================
*/

    
    .timeline-slider .next, 
    .timeline-slider .prev {
        bottom:2rem;
        z-index: 1;
    }

    .progress-timeline-wrapper {
        width: 100%;
        height: auto;
        position:fixed;
        align-items: flex-end;
        margin:0 auto;
        padding:0;
        top:unset;
        left: 0;
        right: 0;
        bottom:0;
        border-radius: 0.5rem 0.5rem 0 0;
        z-index: 2;
    }

    .progress-timeline {
        width: 100%;
        height:0;
        position: relative;
        align-items: flex-start;
        margin:auto 0;
        padding:0;
        top:0;
        left:0;
        right: unset;
        bottom:0;
        border-radius: 0.5rem 0.5rem 0 0;
        overflow-y: auto;
        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .progress-timeline-wrapper {
        background-color: #fafafa;
        -ms-box-shadow: 0.1875rem 0.1875rem 1rem rgba(77, 77, 77, 0.5);
        -webkit-box-shadow: 30.1875rem 0.1875rem 1rem rgb(77 77 77 / 50%);
        -moz-box-shadow: 0.1875rem 0.1875rem 1rem rgba(77, 77, 77, 0.5);
        box-shadow: 0.1875rem 0.1875rem 1rem rgb(77 77 77 / 50%);
        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        box-sizing: border-box
    }

    .progress-timeline-inner {
        width: 100%;
        height: 0;
        position: absolute;
        margin:auto;
        padding:0;
        bottom:0;
        transform-origin: bottom center;
        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }


    .progress-timeline .progress-bar {
        width: 1rem; 
        height: auto;
        left:0.5rem;
    }

    .progress-timeline .progress {
        width: 100%; 
        height: 0; 
        margin:0;
        top:0;
        left: 0;
        right: 0;
        bottom:unset;
    }

    .progress-timeline .indicator-container {
        width: 100%;
        height: 100%;
        position: absolute;
        flex-direction: column; 
        align-items: flex-start;
        margin:0;
        padding: 0; 
        top:0;
        left: 0;
        right: unset;
        bottom: unset;
        z-index: 1; 
    }

    .progress-timeline .indicator-container .dot {
        position: relative;
        display: flex; 
        align-items: center;
        margin:-1rem 0;
        top:0;
        left: unset;
        right: unset;
        bottom: unset;
    }

    .progress-timeline .indicator-container .dot .caption {
        position: relative;
        top:0;
        left:4rem;
        right: unset;
        bottom:unset;
    }

    .progress-timeline::before {
        content: '';
        width: 100%;
        height: 0;
        position:fixed;
        display: block;
        bottom:0;
        left:0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
        z-index: 0;
    }

    .preview-counter {
        width: calc(100% - 10rem);
        position: relative;
        display: flex;
        margin:2rem auto;
        padding:1rem;
        bottom:0;
    }

    .preview-counter .indicator-container {
        position: relative;
        padding:0;
        top:unset;
        bottom:unset;
    }

    .preview-counter .indicator-container .dot .num-label {
        display: none;
    }

    .preview-title,
    .page-count {
        width: 100%;
    }

    .page-count {
        display: none;
    }

    #pb-control-trigger:checked ~ main .section .inner .progress-timeline-wrapper .progress-timeline {
        height:75vh;
        max-height: 32rem;
    }

    #pb-control-trigger:checked ~ main .section .inner .progress-timeline-wrapper .progress-timeline::before {
        height:100%;
    }

    #pb-control-trigger:checked ~ main .section .inner .progress-timeline-wrapper .progress-timeline .progress-timeline-inner {
        height: 100%;
        padding:3.5rem 1.5rem;
        background-color: #fff;
        z-index: 1;
    }


    #pb-control-trigger:checked ~ main .section .inner .progress-timeline-wrapper .progress-timeline .progress-timeline-inner .indicator-container {
        padding:3.5rem 1.5rem;
    }




/* 
===========================================================================================
=================================== Case Study Page CSS ===================================
===========================================================================================
*/

    .cs-cover .banner .left,
    .cs-cover .banner .right {
        width: 100%;
    }

    .cs-cover img {
        width: 100%;
    }

    .cs-cover .btn {
        margin: 1rem auto;
    }

    .cs-section:nth-of-type(even) .inner .container {
        flex-direction: unset;
    }

    .cs-section .left,
    .cs-section .right {
        padding:0;
    }

/* 
===========================================================================================
================================== Portfolio Page CSS =====================================
===========================================================================================
*/


    .filter-button {
        max-width: unset;
        height: auto;
        display: flex;
        margin:0 auto 2rem;
        border-radius: 0.5rem;
    }

    .filter-menu-wrapper {
        width: 100%;
        height: 100vh;
        position: fixed;
        display: flex;
        justify-content: flex-start;
        align-content: flex-end;
        bottom:0;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding: 0;
        border-radius:0;
        -webkit-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        -moz-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        transform: translate(0, 100%);
        z-index: 3;
    }

    .filter-menu-wrapper::after {
        content: '';
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.33);
        -webkit-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        transform: translate(0, 100%);
        -webkit-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        -moz-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
        z-index: 1;
    }

    .filter-header {
        width: calc(100% - 2rem);
        height: auto;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem;
        margin:0 auto;
        background-color: #0a66c2;
        border-radius: 0.5rem 0.5rem 0 0;
        box-sizing: border-box;
        z-index: 2;
    }

    .filter-menu-wrapper .close-button {
        display: flex;
        margin:0 0 0 auto;
    }

    .filter-menu {
        width: calc(100% - 2rem);
        padding:1.75rem 0.75rem 1rem;
        background-color: #313441;
        box-sizing: border-box;
        z-index: 2;
    }

    .filter-menu ul {
        width: 100%;
        flex-wrap: wrap;
    }

    .filter-menu li {
        width: 100%;
        align-items: center;
        margin:0 0 0.5rem;
        padding:0;
    }

    .filter-menu li::after {
        content: '';
        width: 1rem;
        height:1rem;
        top:0.5rem;
        right: 0;
        left: unset;
        border-radius: 0.5rem;
    }

    .filter-menu li:hover::after, 
    .filter-menu li.active::after {
        width: 1rem;
        background-color: #69b6d5;
    }


    #filter-trigger:checked ~ main #projects .inner .filter-button {
        max-width:unset;
    }

    #filter-trigger:checked ~ main #projects .inner .filter-menu-wrapper,
    #filter-trigger:checked ~ main #projects .inner .filter-menu-wrapper::after {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .project-item .arrow-link {
        height: 2.5rem;
    }



/* 
===========================================================================================
================================== Resume Page CSS ========================================
===========================================================================================
*/

    .skill-label,
    .skill-bar,
    .skill-level,
    .skill-level-label {
        width: 100%;
        margin:0 auto;
    }

    .skill-level,
    .skill-level-label {
        justify-content: flex-start;
    }

    .skills .brands li {
        padding:2.5rem 1rem;
    }

    .skills .brands li img, 
    .skills .brands li svg {
        max-width: 3.5rem;
    }

    .resume-header {
        background-color: #0b2435;
    }

    .resume-header h2 {
        margin:0 0 1rem;
    }

    .resume-wrapper .resume-header .profile-picture {
        padding:2rem 2rem 0 !important;
    }


    .profile-picture img {
        width: 100%;
    }

    .column,
    .column:nth-of-type(1),
    .column:nth-of-type(2),
    .resume-wrapper .resume-header .column:nth-of-type(1),
    .resume-wrapper .resume-header .column:nth-of-type(2),
    .resume-body .column:nth-of-type(1),
    .resume-body .column:nth-of-type(2) {
        width: 100%;
        margin:0;
        padding:1rem;
    }

    .resume-wrapper .heading {
        width: 100%;
    }

    .resume-wrapper .item ul {
        justify-content: space-between;
    }

    .resume-wrapper .heading::after {
        display: none;
    }

    .resume-wrapper .item .diamond-list {
        width: 100%;
        margin: auto;
    }

    .resume-wrapper .item .diamond-list li {
        width: calc(100% - 1.5rem);
        margin:1rem auto;
        padding:0 0 0 1.5rem;
    }


    .profile-picture::before {
        display: none;
    }

    .occupation::before {
        display: block;
        height: 1.25rem;
    }

    .occupation .title {
        text-align: center;
    }

    .occupation h2 {
        line-height: unset;
    }

    .resume-header .social-media ul {
        flex-direction: unset;
        justify-content: center;
    }

    .education.item {
        margin:0 auto;
    }

    .timeline:after {
        left: 0.5rem;
    }

    .timeline .row .year {
        max-width: 8.25rem;
        margin: 0 0 0 2rem;
        top:0;
        right: 0;
        text-align: center;
    }

    .timeline .summary {
        margin:0 0 0 2rem;
    }

    .timeline .summary::after {
        width: 1.5rem;
        height: 1.5rem;
        left: -2.125rem;
    }

    .timeline .summary ul {
        width: 100%;
        margin:0;
    }

    .timeline .summary ul li {
        margin:1rem 0 1rem 1rem;
    }

/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/

    #contact .contact-info ul li a {
        padding:2rem 1rem;
    }

/* 
===========================================================================================
================================== Chat Widget CSS ========================================
===========================================================================================
*/
    .chat-widget,
    .chat-widget-body,
    .chat-widget-section,
    .chat-widget-nav,
    .chat-widget-body::-webkit-scrollbar,
    .chat-widget-body::-webkit-scrollbar-thumb,
    .chat-widget-body::-webkit-scrollbar-track {
        border-radius: 0;
    }


    .chat-widget-button {
        width: 2.5rem;
        height: 2.5rem;
        right: 1rem;
        bottom:1rem;
    }

    .chat-widget-button svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .chat-widget .close-button {
        display: flex;
    }

    .chat-widget {
        max-width: unset;
        right: 0;
        bottom:0;
        border-radius: unset;
        border-width: 0;
    }

    .chat-widget-body {
        max-height: unset;
        height: calc(100dvh - 5.5rem);
    }

    .chat-widget-nav {
        padding:0;
    }

    .chat-widget-nav ul {
        flex-direction: unset;
    }


}

@media all and (min-width:499px) and (max-width: 764px) {

    
    h1,
    .name h1,
    .occupation h1 {
        font-size:2.25rem ;
    }

    h2,
    .name h2,
    .occupation h2 {
        font-size: 1.85rem;
    }

    h3,
    .resume-wrapper .heading h3 {
        font-size:1.5rem;
    }

    h4 {
        font-size: 1.125rem;
    }

/* 
===========================================================================================
=================================== Header CSS ============================================
===========================================================================================
*/

    .nav-wrapper {
        max-width: 22.5rem;
    }


    .nav-wrapper .social-media ul li {
        width: calc(100%/4 - 0rem);
    }
    
    
    .nav-wrapper .social-media ul li a {
        padding:2.5rem 1.5rem;
    }
    

/* 
===========================================================================================
=================================== About Page CSS ========================================
===========================================================================================
*/

    .skills .brands li {
        width: calc(100%/2 - 1rem);
        margin:0 0.5rem 1rem;
    }
   
    .skills .brands li label {
        font-size: 1rem;
    }
    

    
/* 
===========================================================================================
================================== Portfolio Page CSS =====================================
===========================================================================================
*/


    .project-item {
        width: calc(100%/2 - 1rem);
        margin:0 0.5rem 1.5rem;
    }



/* 
===========================================================================================
================================== Resume Page CSS ========================================
===========================================================================================
*/

    .resume-wrapper {
        width: calc(100% - 2.75rem);
        max-width:600px;
    }

    .resume-header .column:nth-of-type(1),
    .resume-header .column:nth-of-type(2) {
        width: 100%;
        padding:2rem 1rem;
    }

    .resume-wrapper .resume-header .profile-picture {
        padding:2rem 2rem 0;
    }


    .resume-body .column:nth-of-type(1),
    .resume-body .column:nth-of-type(2) {
        width: 100%;
        padding:2rem 1rem;
    }


    .resume-wrapper .interests ul li {
        width: calc(100%/3 - 2rem);
        margin: 1rem;
    }


    .timeline .summary::after {
        top:0.5rem;
    }

/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/

    #contact .contact-info {
        max-width: 600px;
        margin: 0 auto;
    }

    #contact .contact-info ul li {
        width: 100%;
        margin:0 0 1.5rem;
    }

    #contact .contact-info ul li a svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    #contact .contact-info ul li label {
        font-size: 1.25rem;
    }


}

@media all and (max-width:499px) {



/* 
===========================================================================================
================================== Portfolio Page CSS =====================================
===========================================================================================
*/
    
    .project-item {
        width: 100%;
        margin:0 0 1.5rem;
    }
    

/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/

    #contact .contact-info ul li {
        width: 100%;
        margin:0 0 1.5rem;
    }

    #contact .contact-info ul li a svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    #contact .contact-info ul li label {
        font-size: 1.125rem;
    }
    
}

@media all and (min-width: 399px) and (max-width: 498px) {

    h1,
    .name h1,
    .occupation h1 {
        font-size:2rem ;
    }

    h2,
    .name h2,
    .occupation h2 {
        font-size: 1.75rem;
    }

    h3,
    .resume-wrapper .heading h3 {
        font-size:1.5rem;
    }

    h4 {
        font-size: 1.125rem;
    }
    
    p {
        font-size: 1rem;
    }


/* 
===========================================================================================
=================================== Header CSS ============================================
===========================================================================================
*/


    .nav-wrapper .social-media ul li {
        width: calc(100%/4 - 0rem);
    }


    .nav-wrapper .social-media ul li a {
        padding:2.5rem 1.5rem;
    }


/* 
===========================================================================================
=================================== About Page CSS ========================================
===========================================================================================
*/

    .skills .brands {
        align-items: stretch;
    }

    .skills .brands li {
        width: calc(100%/2 - 1rem);
        margin:0 0.5rem 1rem;
    }

    .skills .brands li label {
        font-size: 1rem;
    }
    

/* 
===========================================================================================
================================== Resume Page CSS ========================================
===========================================================================================
*/

    .resume-wrapper .item.contact-info ul li label {
        font-size: 1.1rem;
    }


    .resume-wrapper .interests ul li {
        width: calc(100%/3 - 2rem);
        margin: 1rem;
    }

    .resume-wrapper .item .brands li {
        width: calc(100%/4 - 2rem);
        margin:1rem;
    }

    .timeline .summary::after {
        top:0.5rem;
    }

    .timeline .summary .heading {
        width: calc(100% - 8.5rem);
    }

}

@media all and (min-width: 322px) and (max-width: 398px) {

    h1,
    .name h1,
    .occupation h1 {
        font-size:2rem ;
    }

    h2,
    .name h2,
    .occupation h2 {
        font-size: 1.5rem;
    }

    h3,
    .resume-wrapper .heading h3 {
        font-size:1.25rem;
    }

    h4 {
        font-size: 1.125rem;
    }
    
    p {
        font-size: 1rem;
    }



/* 
===========================================================================================
=================================== Header CSS ============================================
===========================================================================================
*/


    .nav-wrapper .social-media ul li {
        width: calc(100%/4 - 0rem);
    }


    .nav-wrapper .social-media ul li a {
        padding:2.5rem 1.5rem;
    }




/* 
===========================================================================================
=================================== About Page CSS ========================================
===========================================================================================
*/

    .skills .brands li {
        width: 100%;
        margin:0 auto 1rem;
    }

    .skills .brands li label {
        font-size: 0.95rem;
    }

/* 
===========================================================================================
================================== Portfolio Page CSS =====================================
===========================================================================================
*/

    .project-item .description ul li {
        width:100%;
    }

    .project-item .description ul li:nth-of-type(1),
    .project-item .description ul li:nth-of-type(2) {
        margin:0.125rem 0 0;
    }

    .project-item .description ul li .btn {
        height: auto;
    
    }

    .project-item .description ul li:nth-of-type(1) .btn {
        border-radius: 0;
    }

    .project-item .description ul li:nth-of-type(2) .btn {
        border-radius: 0 0 0.5rem 0.5rem;
    }
   


/* 
===========================================================================================
================================== Resume Page CSS ========================================
===========================================================================================
*/

    .resume-wrapper .item.contact-info ul li label {
        font-size: 1rem;
    }

    .resume-wrapper .interests ul li {
        width: calc(100%/3 - 2rem);
        margin: 1rem;
    }

    .resume-wrapper .item .brands li {
        width: calc(100%/3 - 2.5rem);
        max-width: 2.875rem;
        margin:1rem 1.25rem;
    }

    .resume-wrapper .item .brands li label {
        font-size: 0.9rem;
    }

    .timeline .row .year {
        position: relative;
    }

    .timeline .summary::after {
        top:-2rem;
    }

    .timeline .summary .heading {
        width: 100%;
    }


/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/

    .contact-info ul li label {
        font-size: 1.125rem;
    }


}

@media all and (max-width: 321px) {


    h1,
    .name h1,
    .occupation h1 {
        font-size:1.875rem ;
    }

    h2,
    .name h2,
    .occupation h2 {
        font-size: 1.5rem;
    }

    h3,
    .resume-wrapper .heading h3 {
        font-size:1.25rem;
    }

    h4 {
        font-size: 1.125rem;
    }

    p {
        font-size: 0.9rem;
    }


/* 
===========================================================================================
=================================== Header CSS ============================================
===========================================================================================
*/


    .nav-wrapper .social-media ul li {
        width: calc(100%/2 - 0rem);
    }

    
    .nav-wrapper .social-media ul li a {
        padding:2rem 1.5rem;
    }


/* 
===========================================================================================
=================================== About Page CSS ========================================
===========================================================================================
*/

    .skills .brands li {
        width: 100%;
        margin:0 auto 1rem;
    }

    .skills .brands li label {
        font-size: 0.85rem;
    }
    

/* 
===========================================================================================
================================== Portfolio Page CSS =====================================
===========================================================================================
*/

    .project-item .description ul li {
        width:100%;
    }
    
    .project-item .description ul li:nth-of-type(1),
    .project-item .description ul li:nth-of-type(2) {
        margin:0.125rem 0 0;
    }
    
    .project-item .description ul li .btn {
        height: auto;
      
    }
    
    .project-item .description ul li:nth-of-type(1) .btn {
        border-radius: 0;
    }

    .project-item .description ul li:nth-of-type(2) .btn {
        border-radius: 0 0 0.5rem 0.5rem;
    }
       

/* 
===========================================================================================
================================== Resume Page CSS ========================================
===========================================================================================
*/


    .resume-wrapper .item.contact-info ul li label {
        font-size: 0.9rem;
    }

    .resume-wrapper .interests ul li {
        width: calc(100%/2 - 3rem);
        margin: 1rem 1.5rem;
    }

    .resume-wrapper .item .brands li {
        width: calc(100% / 2 - 4.25rem);
        max-width: 2.5rem;
        margin: 1rem 2.125rem;
    }

    .resume-wrapper .item .brands li label {
        white-space: pre;
        font-size: 0.8rem;
    }

    .timeline .row .year {
        position: relative;
    }

    .timeline .summary::after {
        top:-2rem;
    }

    .timeline .summary .heading {
        width: 100%;
    }

/* 
===========================================================================================
================================== Contact Page CSS =======================================
===========================================================================================
*/

    .contact-info ul li label {
        font-size: 1rem;
    }



}