/* css reset start */

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: none;
    text-decoration: none;
    box-sizing: border-box;
    user-select: none;
}

/* by default mode is dark  */
:root {
    --white-color: white;
    --black-color: black;
    --home-picture-opacity: 0.3;
    --orange-color: orange;
    --bg-color: #1f242d;
    --second-bg-color: #323946;
    --green-color: green;
    --red-color: red;
    --yellow-color: yellow;
}

.light {
    --white-color: black;
    --black-color: white;
    --home-picture-opacity: 0.3;
    --orange-color: orange;
    --bg-color: #f0ffff;
    --second-bg-color: #ffe4cd;
    --green-color: green;
    --red-color: red;
    --yellow-color: yellow;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 20px;
}

p {
    font-size: 18px;
}

a {
    font-size: 18px;
    cursor: pointer;
}

/* css reset end */

/* html & body start  */

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    background-color: var(--bg-color);
}

.text-span {
    color: var(--orange-color);
}

/* html & body end  */

/* header start  */

header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 8vh;
    position: fixed;
    top: 0;
    z-index: 1000;
}

header .left {
    margin-left: 5vw;
}

header .left a h1 {
    color: var(--orange-color);
    cursor: pointer;
}

header .middle nav ul {
    display: flex;
    flex-direction: row;
    gap: 5vh;
}

header .middle nav ul li a {
    color: var(--white-color);
    padding: 3px 9px;
    font-weight: bold;
}

header .middle nav ul li a.active,
header .middle nav ul li a:hover {
    color: var(--orange-color);
}

header .right {
    margin-right: 2vw;
    display: flex;
    align-items: center;
}

header .right .fa-sun {
    color: var(--orange-color);
    cursor: pointer;
    font-size: 21px;
}

header .right .fa-moon {
    color: var(--orange-color);
    cursor: pointer;
    font-size: 28px;
}

/* header end  */

/* progress section bar start  */

.progress {
    height: 5px;
    width: 100%;
    position: fixed;
    top: 8vh;
    z-index: 1000;
}

.highlight {
    transition: width 0.5s linear;
    width: 0%;
    background-color: var(--orange-color);
    height: 100%;
}

/* progress section bar end  */

/* home section start */

#home {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 8vh 4vw 0;
    margin-top: 8vh;
    height: 92vh;
    background-color: var(--home-bgcolor);
}

#home .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
    width: 50%;
    height: 100%;
}

#home .left h1 {
    color: var(--white-color);
    line-height: 40px;
}

#home .left h1 span {
    font-weight: bolder;
}

#home .left p {
    color: var(--white-color);
    width: 70%;
    margin-bottom: 2vh;
}

#home .left a {
    padding: 2vh 2vw;
    background-color: var(--orange-color);
    color: var(--black-color);
    border-radius: 10px;
    font-weight: bolder;
}

#home .left a:hover {
    box-shadow: 0px 0px 3vh 1vh var(--orange-color);
}

#home .right {
    width: 50%;
    display: flex;
    justify-content: center;
    height: 100%;
    background-color: var(--orange-color);
    border-bottom-right-radius: 5%;
    border-bottom-left-radius: 90%;
    border-top-right-radius: 90%;
    border-top-left-radius: 5%;
}

#home .right img {
    width: 60%;
    animation: akku 2s ease-in-out infinite alternate;
}

@keyframes akku {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-5%);
    }
}

/* home section end */

/* about section start */

#about {
    display: flex;
    flex-direction: column;
    padding: 8vh 4vw 0;
    width: 100%;
}

#about h1 {
    width: 100%;
    text-align: center;
    color: var(--white-color);
}

#about .lower {
    margin-top: 6vh;
    display: flex;
    flex-direction: row;
}

#about .lower .left {
    text-align: center;
}

#about .lower .left,
#about .lower .right {
    width: 50%;
}

#about .lower .left img {
    width: 50%;
    background-color: var(--second-bg-color);
    border: 1px solid var(--orange-color);
    box-shadow: 0px 0px 3vh 1vh var(--orange-color);
}

#about .lower .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5vh;
}

#about .lower .right h2 {
    color: var(--white-color);
}

#about .lower .right p {
    color: var(--white-color);
}

#about .lower .right .about-table {
    color: var(--white-color);
    display: flex;
    flex-direction: row;
    gap: 3vw;
}

#about .lower .right .about-table .table-list {
    width: 50%;
}

#about .lower .right .about-table .table-list table th,
#about .lower .right .about-table .table-list table td {
    font-size: 16px;
    text-align: left;
    padding: 5px 6px;
}

#about .lower .right .about-table .table-list table a {
    color: var(--white-color);
    font-size: 16px;
}

#about .lower .right .cv-list {
    text-align: center;
}

#about .lower .right .cv-list a {
    padding: 2vh 2vw;
    background-color: var(--orange-color);
    color: var(--black-color);
    border-radius: 10px;
    font-weight: bolder;
}

#about .lower .right .cv-list a:hover {
    box-shadow: 0px 0px 3vh 1vh var(--orange-color);
}

/* about section end */

/* education section start */

#edu-exp {
    display: flex;
    flex-direction: column;
    padding: 8vh 4vw 0;
    width: 100%;
}

#edu-exp h1 {
    width: 100%;
    text-align: center;
    color: var(--white-color);
}

#edu-exp .list {
    margin-top: 6vh;
    display: flex;
    flex-direction: row;
    gap: 3vw;
}

#edu-exp .list .education,
#edu-exp .list .experience {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 4vh;
}

#edu-exp .list .education .education-title,
#edu-exp .list .experience .experience-title {
    color: var(--white-color);
}

#edu-exp .list .education .education-list,
#edu-exp .list .experience .experience-list {
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

#edu-exp .list .education .education-list .education-content,
#edu-exp .list .experience .experience-list .experience-content {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    background-color: var(--second-bg-color);
    padding: 2vh 3vw;
}

#edu-exp .list .education .education-list .education-content h2,
#edu-exp .list .education .education-list .education-content p,
#edu-exp .list .experience .experience-list .experience-content h2,
#edu-exp .list .experience .experience-list .experience-content p {
    color: var(--white-color);
}

#edu-exp .list .education .education-list .education-content h3,
#edu-exp .list .experience .experience-list .experience-content h3 {
    color: var(--orange-color);
}

#edu-exp .list .education .education-list .education-content h5,
#edu-exp .list .experience .experience-list .experience-content h5 {
    color: var(--orange-color);
}

/* education section end */

/* skills section start */

#skills {
    display: flex;
    flex-direction: column;
    padding: 8vh 4vw 0;
    width: 100%;
}

#skills h1 {
    width: 100%;
    text-align: center;
    color: var(--white-color);
}

#skills .title {
    text-transform: uppercase;
}

#skills .lower {
    margin-top: 6vh;
    display: flex;
    flex-direction: row;
    gap: 3vw;
    width: 100%;
}

#skills .lower .container {
    width: 50%;
}

#skills .lower .container .skill-box {
    width: 100%;
    margin: 25px 0;
}

#skills .lower .container .skill-box .title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--white-color);
}

#skills .lower .container .skill-box .skill-bar {
    height: 8px;
    width: 100%;
    border-radius: 6px;
    margin-top: 6px;
    background: var(--second-bg-color);
}

#skills .lower .container .skill-box .skill-bar .skill-per {
    position: relative;
    display: block;
    height: 100%;
    width: 90%;
    border-radius: 6px;
    background: var(--orange-color);
    opacity: 0;
}

#skills .lower .container .skill-box .skill-bar .skill-per.active {
    animation: progress 0.4s ease-in-out forwards;
}

#skills .lower .container .skill-box .skill-bar .skill-per.html {
    width: 90%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.css {
    width: 90%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.js {
    width: 75%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.ts {
    width: 65%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.php {
    width: 70%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.mysql {
    width: 80%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.reactjs {
    width: 70%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.nextjs {
    width: 70%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.nodejs {
    width: 65%;
    animation-delay: 0.5s;
} 

#skills .lower .container .skill-box .skill-bar .skill-per.reactnative {
    width: 50%;
    animation-delay: 0.5s;
} 

#skills .lower .container .skill-box .skill-bar .skill-per.ajax {
    width: 75%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.sqa {
    width: 80%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.mongodb {
    width: 70%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.github {
    width: 70%;
    animation-delay: 0.5s;
}

#skills .lower .container .skill-box .skill-bar .skill-per.project-management {
    width: 90%;
    animation-delay: 0.5s;
}

@keyframes progress {
    0% {
        width: 0;
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

#skills .lower .container .skill-box .skill-bar .skill-per .tooltip {
    position: absolute;
    right: -14px;
    top: -28px;
    font-size: 15px;
    font-weight: 500;
    color: var(--white-color);
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--orange-color);
    z-index: 1;
}

#skills .lower .container .skill-box .skill-bar .tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    height: 10px;
    width: 10px;
    z-index: -1;
    background-color: var(--orange-color);
    transform: translateX(-50%) rotate(45deg);
}

/* skills section end */

/* projects section start */

#projects {
    padding: 8vh 1vw 0;
    width: 100%;
}

#projects h1 {
    width: 100%;
    text-align: center;
    color: var(--white-color);
}

#projects .projectslidearrow{
    position: relative!important;
    width: 100%;
}

#projects .projectswiper {
    width: 90%;
    margin-top: 6vh;
    position: static!important;
}

#projects .projectswiper .swiper-slide {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--orange-color);
}

#projects .projectswiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#projects .projectswiper .swiper-slide .demo-link {
    display: flex;
    flex-direction: row;
    gap: 2vh;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 999;
    bottom: 2vh;
}

#projects .projectswiper .swiper-slide .demo-link a {
    padding: 2vh 2vw;
    background-color: var(--orange-color);
    border-radius: 10px;
    color: var(--black-color);
    font-weight: bolder;
    position: relative;
}

#projects .projectswiper .swiper-slide .demo-link a:hover {
    box-shadow: 0px 0px 3vh 1vh var(--orange-color);
}

#projects .projectswiper .swiper-button-next,
#projects .projectswiper .swiper-button-prev {
    position: relative;
}

#projects .swiper-button-prev:after,#projects .swiper-button-next:after {
    color: var(--orange-color);
}

/* projects section end */

/* contact section start */

#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6vh;
    padding: 8vh 4vw 0;
}

#contact h1,
#contact h2 {
    color: var(--white-color);
}

#contact .upper {
    display: flex;
    justify-content: center;
    width: 100vw;
}

#contact .upper form {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    width: 45vw;
}

#contact .upper form label {
    color: var(--white-color);
}

#contact .upper form input {
    outline: none;
    height: 8vh;
    padding: 1vw 3vh;
    border: 1px solid var(--second-bg-color);
    background-color: var(--second-bg-color);
    color: var(--white-color);
}

#contact .upper form input:focus,
#contact .upper form textarea:focus {
    border: 1px solid var(--orange-color);
    color: var(--white-color);
}

#contact .upper form textarea {
    resize: none;
    outline: none;
    border: 1px solid var(--second-bg-color);
    padding: 1vw 3vh;
    background-color: var(--second-bg-color);
    color: var(--white-color);
}

#contact .upper form div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
}

#my-form-success {
    text-align: center;
    padding: 1vw 2vh;
    border-radius: 20px;
    border: 1px solid var(--green-color);
    color: var(--white-color);
    font-weight: bolder;
    background-color: var(--green-color);
    box-shadow: 0px 0px 3vh 1vh var(--green-color);
    display: none;
}

#my-form-fail {
    text-align: center;
    padding: 1vw 2vh;
    border-radius: 20px;
    border: 1px solid var(--red-color);
    color: var(--white-color);
    font-weight: bolder;
    background-color: var(--red-color);
    box-shadow: 0px 0px 3vh 1vh var(--red-color);
    display: none;
}

#my-form-status {
    text-align: center;
    padding: 1vw 2vh;
    border-radius: 20px;
    border: 1px solid var(--red-color);
    color: var(--white-color);
    font-weight: bolder;
    background-color: var(--red-color);
    box-shadow: 0px 0px 3vh 1vh var(--red-color);
    display: none;
}

#contact .upper form button {
    padding: 1vw 2vh;
    border-radius: 20px;
    border: 1px solid var(--orange-color);
    cursor: pointer;
    color: var(--black-color);
    font-weight: bolder;
    background-color: var(--orange-color);
}

#contact .upper form button:hover {
    box-shadow: 0px 0px 3vh 1vh var(--orange-color);
}

#contact .lower ul {
    display: flex;
    flex-direction: row;
    gap: 5vh;
}

#contact .lower ul li a {
    padding: 8px 10px;
    border-radius: 50%;
    color: white;
}

#contact .lower ul li:nth-child(1) a {
    background-color: red;
}

#contact .lower ul li:nth-child(2) a {
    background-color: #0165E1;
}

#contact .lower ul li:nth-child(3) a {
    background-color: #00acee;
}

#contact .lower ul li:nth-child(4) a {
    background-color: #E5E4E2;
    color: #0072b1;
}

#contact .lower ul li:nth-child(5) a {
    background-color: #E5E4E2;
    color: black;
}

/* contact section end */

/* footer start */

footer {
    margin-top: 8vh;
    text-align: center;
}

footer p {
    color: var(--white-color);
}

footer a {
    color: var(--orange-color);
}

/* footer end */

/* mobile-version section start */

#mobile-version {
    width: 100%;
    height: 8vh;
    padding: 1vh 0;
    background-color: var(--bg-color);
    position: fixed;
    bottom: 0;
    display: none;
    z-index: 500;
}

#mobile-version ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
}

#mobile-version ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--orange-color);
    font-size: 20px;
}

/* mobile-version section end */

/* custom scrollbar start */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--second-bg-color);
}

::-webkit-scrollbar-thumb {
    background-clip: content-box;
    background-color: var(--orange-color);
    border-radius: 4px;
    border: 1px solid var(--orange-color);
}

/* custom scrollbar end */