:root {
    --yellow: #FFF64B;
    --teal: #005248;
}

body {
    inset: 0;
    scroll-behavior: smooth;
}


/* Desktop Nav menu animation  */
.ccc {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--teal);
    transition: 0.5s all;
}

/* SVG in about section - download Btn */
.st0 {
    fill: var(--teal);
}

.DownloadResumeBtn:hover,
.DownloadResumeBtn:hover .st0 {
    background-color: var(--teal);
    color: var(--yellow);
    fill: var(--yellow);
}

.menu-item a {
    font-size: 16px;
}

.edu,
.exp,
.skills {
    margin-right: 40px;
}

/* Qualification Overview  */
.skillDiv,
.eduDiv {
    position: relative;
    left: 10%;
    animation: skillDiv .4s ease-in-out forwards;
}

@keyframes skillDiv {
    from {
        left: 10%;
    }

    to {
        left: 0%;
    }
}

/* Services  */
.service {
    border-radius: 18px;
    padding: 24px;
    transition: .4s background-color;
}

/* If active Service  */
.activeService {
    background-color: var(--teal);
    cursor: pointer;
    color: white;
}

.service:hover {
    background-color: var(--teal);
    cursor: pointer;
    color: white;
}

.service .num,
.service .arrow {
    transition: .4s color;
}

.activeService .num,
.activeService .arrow {
    color: var(--yellow);
}

.activeService .v-line {
    background-color: white;
}

.service:hover .num,
.service:hover .arrow {
    color: var(--yellow);
}

.service:hover .v-line {
    background: white;
}

/* Swiper in testimonials  */
.swiper {
    width: 100%;
}

/* Swiper in projects  */
.swiper2 {
    width: 100%;
}

.swiper-slide {
    cursor: pointer;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--teal);
    background-color: yellow;
    border-radius: 100%;
    height: 64px;
    width: 64px;
    border: 2px solid var(--teal);
}

/* Blog Posts */
.blogpost figure>img {
    transition: transform 0.3s ease-in-out;
}

.blogpost:hover img {
    transform: scale(1.05);
}

.blogpost:hover .blogImgCover {
    opacity: 1;
}

.project:hover .projectNameUnderline {
    width: 100%;
}

.blogPost:hover .blogNameUnderline {
    width: 100%;
}

/* Mobile Menu  */
#menuItems {
    position: relative;
    top: -70%;
    animation: menuitems .3s ease-in-out .2s forwards;
}

@keyframes menuitems {
    from {
        top: -70%;
    }

    to {
        top: 0;
    }
}


/* For phone menu  */
#phoneMenu .menu-item.current{
    color: var(--yellow);
}


/* To reset chrome default input fill color  */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}


/* Page Loader  */
.loader{
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    z-index: +100;
    background-color: var(--teal);
    width: 100%;
    height: 100%;
    top: 0;
}

.loader-container {
    position: relative;
    width: 150px;
    height: 150px;
}

.count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circleSVG {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

circle {
    fill: none;
    stroke: var(--yellow);
    stroke-width: 4;
    stroke-dasharray: 314; /* Full circle length */
    stroke-dashoffset: 314;
    transition: stroke-dashoffset 0.1s linear;
    stroke-linecap: round;
}