nav {
    background: lch(93.47% 0.36 17.67);
    right: 0;
    left: 0;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
}

  .menu-hover li :hover {
    border-bottom:3px solid #f5df4e;
}

.Freelancer {
    background: #f5df4e;
    padding-top: 6rem;
}

.logo-f-t-in:hover {
    color: deepskyblue !important;
}


.Designer {
    font-size: 3rem !important;
}

.img-yellow-right {
    border-radius: 50rem;
    border: 1rem solid #fff;
}

.About-Me {
    padding: 7rem 0;
}

.sp-AboutMe {
    background: #f5df4e;
}

.Twenty-two {
    font-size: 110px;
}

.Callum-Smith {
    border-bottom: 3px solid #f5df4e;
}

.Twenty-two {
   
}

.Twenty-two-radius {
    background: #f5df4e;
    border-radius: 50rem;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 22px;
    right: 62px;
}

.What-I-Do {
    padding: 7rem 0;
}

.Resume {
    padding: 7rem 0;
}

.Know-Me-More {
    font-size: 2.5rem;
}

.icon-six {
    color: #f5df4e;
    width: 50px;
    height: 50px;
}

.progress-bar {
    background-color: #f5df4e !important;
}

.Portfolio {
    padding: 7rem 0;
}

.Portfolio-menu:hover {
    color: black !important;
}

.paper {
    width: 50px;
    height: 50px;
    color: #f5df4e;
}

.paper-absolute {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    flex-direction: column;
    justify-content: center;
    background-color: #333d;
    display: none;
}

.blog-hover:hover .paper-absolute {
    display: flex;
}

.www {
    background-color: #f5df4e;
}

.Project-Title1-back {
    background-color: #333d;
    position: fixed !important;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    display: none;
    overflow: auto; /** ของที่อยู่ในกล่องนี้ถ้าความสูงเกินหน้าจอให้มีสกอร์ */
    padding: 3rem;
}

.pro-con {
    position: absolute !important;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 5rem;
    display: none;
}

.cross-Mockups1 {
    margin-left: 680px;
}

.Mockups1java {
    /* top: 3170px; */
    position: absolute !important;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 5rem;
    display: none;
}

.Hire-me-bg {
    background-color: #333d;
    height: 100%;
    width: 100%;
    top: 0;
}

.Hire-Me {
    background: #f5df4e;
}

.title-Hire-me {
    top: 8392px;
}

.menu-portfolio {
    overflow-x: scroll;
    overflow-y: hidden;
    display: -webkit-inline-box;
}

.FAQ {
    background-color: #f5df4e;
}

.ClientSpeak {
    background-color: #f5df4e;
} 

.People {
    padding:0 2rem !important;
}

.Client-img-radius {
    border-radius: 50px;
}

.letget {
    background-color: #f5df4e;
    padding: 7rem 0;
}

.Contact1:hover {
    color: #0d6efd;
}

.Contact2:hover {
    color: blue;
}

.Contact3:hover {
    color: magenta;
}

.Contact4:hover {
    color: aqua;
}

.Contact5:hover {
    color: orange;
}

.form-control {
    background-color: #f5df4e !important;
    outline: none !important;
    border: none !important;
    border-bottom: 1px solid !important;
    border-radius: 0 !important;
}

.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none;

}

.footer-callum {
    color: #f5df4e;
}

.footer-callum:hover {
    text-decoration: none;
}

.FAQ-head {
    padding: 7rem 0;
}

.ClientSpeak-head {
    padding: 7rem 0;
}