/*** 

====================================================================
CSS FILE IMPORT
====================================================================

 ***/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
@import url('../css/owl-carousel.css');
@import url('../css/animate.css');
@import url('../sass/main.css');


:root {
    --primary-color: #0FA0B7;
    --primary-light-color: #E4FAFF;
    --primary-opacity-color: #0FA0B752;
    --secondary-color: #051C3C;
    --text-color: #758599;
    --black-color: #000000;
    --white-color: #ffffff;
    --border-color: #05588E29;
    --dark-gray-color: #262626;
    --ark-gray-shade-color: #2B2B2B;
}



@font-face {
    font-family: "poppins-semibold";
    src: url('../fonts/poppins-semibold/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/poppins-semibold/Poppins-SemiBold.woff') format('woff'),
        url('../fonts/poppins-semibold/Poppins-SemiBold.ttf') format('truetype'),
        url('../fonts/poppins-semibold/Poppins-SemiBold.otf') format('opentype'),
        url('../fonts/poppins-semibold/Poppins-SemiBold.eot') format('embedded-opentype'),
        url('../fonts/poppins-semibold/Poppins-SemiBold.svg') format('svg');
}


@font-face {
    font-family: "poppins-medium";
    src: url('../fonts/poppins-medium/Poppins-Medium.woff2') format('woff2'),
        url('../fonts/poppins-medium/Poppins-Medium.woff') format('woff'),
        url('../fonts/poppins-medium/Poppins-Medium.ttf') format('truetype'),
        url('../fonts/poppins-medium/Poppins-Medium.otf') format('opentype'),
        url('../fonts/poppins-medium/Poppins-Medium.eot') format('embedded-opentype'),
        url('../fonts/poppins-medium/Poppins-Medium.svg') format('svg');
}


@font-face {
    font-family: "inter-regular";
    src: url('../fonts/inter-regular/Inter-Regular.woff2') format('woff2'),
        url('../fonts/inter-regular/Inter-Regular.woff') format('woff'),
        url('../fonts/inter-regular/Inter-Regular.ttf') format('truetype'),
        url('../fonts/inter-regular/Inter-Regular.eot') format('embedded-opentype'),
        url('../fonts/inter-regular/Inter-Regular.svg') format('svg');
}


@font-face {
    font-family: "inter-medium";
    src: url('../fonts/inter-medium/inter-medium.woff2') format('woff2'),
        url('../fonts/inter-medium/inter-medium.woff') format('woff'),
        url('../fonts/inter-medium/inter-medium.ttf') format('truetype'),
        url('../fonts/inter-medium/inter-medium.eot') format('embedded-opentype'),
        url('../fonts/inter-medium/inter-medium.svg') format('svg');
}

@font-face {
    font-family: "inter-semibold";
    src: url('../fonts/inter-semibold/Inter-SemiBold.woff2') format('woff2'),
        url('../fonts/inter-semibold/Inter-SemiBold.woff') format('woff'),
        url('../fonts/inter-semibold/Inter-SemiBold.ttf') format('truetype'),
        url('../fonts/inter-semibold/Inter-SemiBold.eot') format('embedded-opentype'),
        url('../fonts/inter-semibold/Inter-SemiBold.svg') format('svg');
}




@font-face {
    font-family: "inter-bold";
    src: url('../fonts/inter-bold/Inter-Bold.woff2') format('woff2'),
        url('../fonts/inter-bold/Inter-Bold.woff') format('woff'),
        url('../fonts/inter-bold/Inter-Bold.ttf') format('truetype'),
        url('../fonts/inter-bold/Inter-Bold.eot') format('embedded-opentype'),
        url('../fonts/inter-bold/Inter-Bold.svg') format('svg');
}



.new-project-title span:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 16px;
    height: 16px;
    background: #0FA0B752;
    border-radius: 50%;
    animation: pulse-border 1100ms ease-out infinite;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}


.hand-hello {
    animation-name: wave-animation;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    transform-origin: 70% 70%;
    display: inline-block;
}

@keyframes wave-animation {
    0% {
        transform: rotate(0.0deg)
    }

    10% {
        transform: rotate(14.0deg)
    }

    20% {
        transform: rotate(-8.0deg)
    }

    30% {
        transform: rotate(14.0deg)
    }

    40% {
        transform: rotate(-4.0deg)
    }

    50% {
        transform: rotate(10.0deg)
    }

    60% {
        transform: rotate(0.0deg)
    }

    100% {
        transform: rotate(0.0deg)
    }
}

/* 
@media (min-width:991px) {
    .tab.list--row {
        position: sticky;
        top: 30px;
    }
    .box-featured {
    position: sticky;
    top: 118px;
}
} */



.skill {
    position: relative;
    width: 80px;
    height: 102px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}

.skill svg {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(140deg);
}

.skill circle {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
}

.bg {
    stroke: #D9D9D9;
}

.progress {
    stroke: var(--primary-color);
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.6s ease;
}

.skill img {
    width: auto !important;
    z-index: 2;
}

.skill p {
    position: absolute;
   font-family: "inter-bold", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
    text-align: center;
    color: var(--secondary-color);
    bottom: 0px;
}

.p-t {
    padding-top: 80px;
}

.p-b {
    padding-bottom: 80px;
}


.circle {
    position: relative;
    width: 110px;
    height: 110px;
    background-color: #ffffff;
}

.circle svg {
    transform: rotate(-90deg);
    width: 110px;
    height: 110px;

}

.circle circle {
    fill: none;
    stroke-linecap: butt;
}

.bg {
    stroke: #E4ECEE;
    stroke-width: 15;
}

.progress {
    stroke: var(--primary-color);
    stroke-width: 15;
    stroke-linecap: butt;
    fill: none;
    stroke-dasharray: 298.45;
    stroke-dashoffset: 298.45;
    transition: stroke-dashoffset 1s ease;
}

.circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   font-family: "inter-bold", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 130%;
    color: var(--primary-color);

}

.row--time--line:nth-child(even) {
    flex-direction: row-reverse;

}

.row--time--line:nth-child(even) .col-time-img .inner {
    margin-left: 0;
    margin-right: auto;
}










header.sticky .resume-btn a {
    height: 39px;
}