body {
    overflow-x: hidden;
    margin: 0;
    /* cursor: none; */
}

/* .Portfo-img{
    cursor: none !important;
}

li .input{
    cursor: none;
}
.btn{
    cursor: none !important;
}

.nav-item{
    cursor: none;
}

.ico {
    cursor: none !important;
}

.ico2{
    cursor: none !important;
}

.submitBtn{
    cursor: none !important;
} */

.App {
    color: #fff;

}

.appcontainer {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.welcomeToMyWebSite,
#resume,
.navbar,
.Portfolio-Container1,
.contactSection,
.footer-container,
#preLoader {
    background-color: #000 !important;
}

.navAndWelcomeSection,
#AboutMe,
.welcomeToMyWebSite,
#resume,
.contactSection,
.footer-container {
    scroll-snap-align: start;
    scroll-behavior: smooth;
    z-index: 12;
}

.welcomeToMyWebSite {
    /* margin-bottom: 50vw; */
    background-color: #141414 !important;
}

.App {
    background-size: 40px 40px;

}


#myVideo {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}

.welcomeToMyWebSite {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 86vh;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#cursor {
    position: fixed;
    margin-top: -5px;
    margin-left: -12px;
    width: 25px;
    height: 25px;
    border-top: 5px solid #0f0;
    border-left: 5px solid #0f0;
    transform-origin: top;
    transform: translate(-1px, 5px) rotate(15deg) scale(0);
    z-index: 10000;
    transition: all visibility transform 1.1s;
    pointer-events: none;
    animation: animate 5s linear infinite;
}

.App:hover #cursor {
    transform: translate(11px, 5px) rotate(15deg) scale(1);
}

@keyframes animate {
    0% {
        filter: drop-shadow(0 0 5px #0f0) drop-shadow(0 0 15px #0f0) drop-shadow(0 0 30px #0f0) hue-rotate(0deg);
    }

    100% {
        filter: drop-shadow(0 0 5px #0f0) drop-shadow(0 0 15px #0f0) drop-shadow(0 0 30px #0f0) hue-rotate(360deg);
    }
}



a {
    color: #be9852;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    text-decoration: none !important;
    outline: none;
    transition: all 0.4s;
}

#preLoader {
    position: fixed;
    z-index: 4000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(0px, -3796px);
    opacity: 1;
    transition: all 6s;
}

#preLoaderDone {
    transform: translate(0px, -376px);
    transition: all 1s;
}

#preLoader-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: absolute;
}

#preLoader-container::-webkit-scrollbar {
    display: none;
}

.path {
    stroke-dasharray: 2000;
    animation: dash 20s infinite;
    width: 130px;
}

@keyframes dash {
    to {
        stroke-dashoffset: 12000;
    }
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}


/* Track */

::-webkit-scrollbar-track {
    backdrop-filter: blur(15px);
}

::-webkit-scrollbar-thumb {
    background: #d3d3d3;
    transition: all 0.5s;
}



.dony {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-fluid {
    width: 90% !important;
    display: flex;
    justify-content: center;
    padding: 4px 10px;
    align-items: center;
}

#collapse {
    width: 80%;
    justify-content: center;
    display: flex;
    transition: all 0.4s;
}

#collapsed {
    transition: all 0.4s;
}

.TitleName {
    transform: translate(15px, 20px);
    text-transform: capitalize;
    color: #c4cfde;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
}

#root {
    transition-duration: 0.8s;
    transition-property: transform all;
    position: relative;
    z-index: 2;
}

p {
    color: rgb(124, 133, 149);
}

.HolPage {
    background-color: #212428;
    padding-bottom: 50px;
    padding-top: 94px;
}

#nav {
    width: 100%;
    position: fixed;
    z-index: 2 !important;
    top: 0;
    opacity: 1;
    box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
    transition: all 0.5s;
    backdrop-filter: blur(5px);
    z-index: 100 !important;
}

.navbar-expand-lg {
    z-index: 1;
}

#nav2 {
    width: 100%;
    z-index: 2 !important;

    top: 0;
    opacity: 1;
    transition: all 0.5s;
    z-index: 100 !important;
}




.btn {
    padding: 0.8em 1.75em;
    background-color: transparent !important;
    border-radius: 56px;
    border: 1px solid #000000 !important;
    transition: .5s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    font-weight: 300;
    font-size: 20px !important;
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    text-transform: uppercase;
    color: #ffffff !important;
    box-shadow: 0px 0px 4px;
}

.btn::after,
.btn::before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    transform: skew(90deg) translate(-50%, -50%);
    position: absolute;
    inset: 50%;
    left: 25%;
    z-index: -1;
    transition: .5s ease-out;
    color: #000000 !important;
    background-color: #ececec;
    box-shadow: 0px 0px 4px !important;

}

.btn::before {
    top: -50%;
    left: -25%;
    transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
}

.btn:hover::before {
    transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
}

.btn:hover::after {
    transform: skew(45deg) translate(-50%, -50%);
}

.btn:hover {
    color: rgb(0, 0, 0) !important;
}

.btn:active {
    filter: brightness(.7);
    transform: scale(.98);
}

#NavSignUpBtn {
    font-size: 12px;
    padding: 11px 17px;
    color: #000;
    border: 0;
    display: inline-block;
    vertical-align: middle;
    background: #ededed;
    box-shadow: 1px 1px #b1b1b1, 2px 2px #b1b1b1, 3px 3px #b1b1b1, 4px 4px #b1b1b1, 5px 5px #b1b1b1, 4px 4px #b1b1b1, 0px 0px #b1b1b1, 0px 0px #b1b1b1;
    transform: perspective(1px) translateZ(0);
    border-radius: 7px;
    -webkit-transition-duration: 0.3s;
    transition: all 0.5s !important;
    transition-duration: 0.3s;
}

#NavSignUpBtn:hover,
#NavSignUpBtn:focus,
#NavSignUpBtn:active {
    background: #be9852;
    box-shadow: 3px 0px 0px 1px #be9852, 2px 2px 0px 3px #be9852;
    transition: all 0.5s !important;
    transition-duration: 0.3s;
}

#NavSignUpBtn a {
    color: #ffffff;
    transition: all 0.5s;
}

#NavSignUpBtn:hover a,
#NavSignUpBtn:hover {
    color: #ffff;
    transition: all 0.5s;
}

.Toggle-btn {
    border: 0;
    border-radius: 10px;
    padding: 10px 20px;
    display: none;
    height: fit-content;
}

.native {
    transform: translateY(-90px);
    transition-property: transform;
    transition-duration: 0.5s;
}

.native2 {
    transform: translateY(0px);
    transition-property: transform;
    transition-duration: 0.5s;
    box-shadow: 0px 0px 0.7px black;
}

.color {
    color: #0d6efd;
}

.LogoIcon {
    width: 59px;
    border-radius: 50%;
}

.native {
    transform: translateY(-90px);
    transition-property: transform;
    transition-duration: 0.5s;
}

.navbar {
    background-color: transparent !important;
}

.nav-item {
    margin-left: 14px;
    position: relative;
    top: 2px;
    font-size: 13px;
    padding-top: 18px;
    padding: 18px 0px 18px 0px;
    font-family: 'Nunito', sans-serif;
}

.text-gold {
  color: #be9852;
  font-weight: bold;
}

.big-text {
    font-size: 40px;
}
@media (width < 768px) {
    .big-text {
        font-size: 30px;
    }
}

#changeColor {
    transform: translateX(-11px);
    list-style-type: none;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    padding: 0;
    gap: 38px;
    display: flex;
}

#changeColor:hover #othersNavItem {
    opacity: 0.4;
    /* color: #acacac; */
}

#changeColor:hover #othersNavItem:hover {
    color: #2bc04e;
    opacity: 1;
    transition: all 0.4s;
}

#othersNavItem {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #000000;
    transition: all 0.5s;
}

#othersNavItemScroll {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #fff;
    transition: all 0.5s;
}



#othersNavItemScroll:hover {
    color: #909090;
}

.nav-link {
    color: #fff;
}

#homeItem {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #E3F1FF;
}

.navLogo {
    position: relative;
    display: flex;
    color: rgb(7, 30, 85);
    font-family: 'Nunito Sans', sans-serif;
    top: 7px;
    left: 4px;
}

.login {
    position: relative;
    right: 17px;
    top: 2px;
    text-decoration: none;
    color: #595959;
    font-size: 17px;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
}


#signUpBtn {
    font-size: 12px;
    border: 0;
    color: #878e99;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: #fffcee;
    box-shadow: 1px 0px 1px 1px #b1b1b1, 2px 2px #b1b1b1, 3px 3px #b1b1b1, 4px 4px #b1b1b1, 5px 4px #b1b1b1, 6px 6px #b1b1b1, 7px 7px #b1b1b1, 8px 8px #b1b1b1;
    transform: perspective(1px) translateZ(0);
    border-radius: 7px;
    -webkit-transition-duration: 0.3s;
    transition: all 0.5s !important;
    transition-duration: 0.3s;
    cursor: pointer;
}

#signUpBtn:hover,
#signUpBtn:focus,
#signUpBtn:active {
    background: #be9852;
    box-shadow: 3px 0px 0px 1px #be9852, 2px 2px 0px 3px #be9852;
    transition: all 0.5s !important;
    transition-duration: 0.3s;
}

#signUpBtn a {
    color: #878e99;
    transition: all 0.5s;
}

#signUpBtn:hover a,
#signUpBtn:hover {
    color: #ffff;
    transition: all 0.5s;
}

.hireMe-part {
    display: flex;
    gap: 8px;
}



/***********************

 * WELCOMEWORLDSECTION *
            
***********************/

.welcomeToMyWebSite {
    padding-top: 57px;
}

.welcomeToMyWorldSection-continer {
    width:100%;
    display: flex;
    margin: 0px auto;
    /* justify-content: center; */
}

.left-contanir {
    text-align: left;
    max-width: 89%;
    display: grid;
    align-items: center;
}



.path2:hover {
    stroke-dasharray: 2000;
    animation: dash 20s linear;
    width: 130px;
    z-index: 1000;
}

@keyframes dash {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 12000;
    }
}

.personal-img {
    height: 40%;
    border-radius: 10px;
    z-index: 1;
    position: relative;
}

.personal-img::before {
    content: "asfgasgas";
    background-color: red;
    height: 100%;
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
}

.introWord {
    line-height: 5vw;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    color: #c4cfde;
    letter-spacing: 3px;
}

.subName {
    color: #be9852;
}

.welcomeToMyWorldSection-right {
    margin-left: 120px;
    align-items: flex-end;
    justify-content: center;
    justify-content: center;
    z-index: 1;
    transition-property: background-image linear-gradient all;
    transition-duration: 0.4s;
}



.welcomeToMyWorldSection-right:hover:after {
    opacity: 1;
}

.frontImg {}

.welcomeToMyWorldSection-left {
    display: flex;
    max-width: 62%;
    padding-left: 30px;
    justify-content: center;
    align-items: center;
    text-align: right;
}

.pleasureLine {
    color: #be9852;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.typo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 50px;
    color: #fff;
}

.typoChanger {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 38px;
    color: #fff;
}

.description {
    margin-top: 20px;
    max-width: 40%;
    margin-bottom: 145px;
    font-size: 17px;
    line-height: 30px;
    color: #c4cfde;
    opacity: 0.9;
}

.as {
    width: 100%;
}

.homes {

    z-index: 1;
    width: 100%;

}

@media (width < 768px) {
    .para-project-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.carousel {
    /* position: absolute !important;
    top: 0px;
    float: none !important;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden; */

    position: absolute !important;
    top: 0px;
    /* float: none !important; */
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* height: 100vh; */
}


.welcome-carousel-img {
    background-size: cover !important;
    width: 100%;
    height: 100vh;
}

.d {
    width: 100%;
    /* height: 100vh; */
    object-fit: cover;
}


.icos1 {
    margin-right: 50px;
}

.icons {
    margin-right: 20px;
    padding: 17px 19px;
    line-height: 21px;
    border-radius: 6px;
    color: #c4cfde;
    background: linear-gradient(145deg, #1e2024, #23272b);
    box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
    transition: 0.4s;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    border: 0 none;
    transform: perspective(1px) translateZ(0);
}

.icons::before {
    content: "";
    position: absolute;
    transition: 0.2s;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    top: 0;
    left: 0;
    background: linear-gradient(to right bottom, #212428, #16181c);
    opacity: 0;
    z-index: -1;
}

.icons:hover {
    transform: translateY(-4px);
    background-color: linear-gradient(to right bottom, #263636, #24262b);
    box-shadow: 5px 5px 8px #1c1e22, -5px -5px 8px #262a2e;
    transition: background-color box-shadow 0.5s;
}

.titleForIcons {
    color: #c4cfde;
}

.iconHolder {
    margin-top: 2vw;
    width: 20vw;
}

.images {
    padding: auto 20px;
    width: 10%;
    max-height: 23px;
    width: auto;
    border: 0;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

.settingCharacters {
    display: flex;
    margin: 0 auto;
    height: 135px;
    position: relative;
    top: 53px;
}


/******************
            
            * SECOND SECTION *

******************/
.skills-container {
    display: flex;
    justify-content: center;
}

.onlyAbout {
    height: 800px;
    position: relative;
    z-index: -2;
    background-color: rgb(255, 255, 255);
}

#AboutMe {
    background-color: #141414;
    padding: 80px 0;
    /* position: fixed; */
    top: 0;
    z-index: -1;
    width: 100vw;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 1000px;
}

.About-secondSection {
    text-align: center;
    width: 85%;
    margin: 0px auto;
}

.about-continer {
    background-color: transpar/ent;
    display: flex;
    justify-content: center;
    align-items: center;
}

hr {
    width: 95% !important;
    margin: auto !important;
    color: #000;
}

.subtitle {
    color: #be9852;
    letter-spacing: 1px;
    display: block;
    line-height: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.title {
    font-family: 'Montserrat', sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    color: #c4cfde;
    margin-top: 15px;
    margin-bottom: 0px;
}

.AboutTitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2;
    color: #c4cfde;
    margin-top: 15px;
    margin-bottom: 0px;
}

.feild {
    list-style-type: none;
    display: inline-flex;
    width: 95%;
    margin-left: 67px;
    gap: 25px;
}

.aboutList {
    display: inline-block;
    margin-top: 30px;
    width: 29%;
    gap: 20px;
    height: 340px;
    background-color: #212428;
    box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
    transition: background-color 0.5s;
    cursor: pointer;
    border-radius: 10px;
}

.aboutList:hover {
    transition: background-color 0.5s;
    background-color: #1B1E22;
}

.about-right-img-section {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

.about-right-img-section img {
    height: 75vh;
    width: 65%;
    object-fit: contain;
}

.about-decribtion {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
}

.about-title {
    color: #be9852;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: center;
}

.about-left-sectiom {
    padding-top: 50px;
    width: 50%;
}

.contain {
    transition: transform 0.5s;
    padding: 60px 47px;
}

.CardTitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    margin-bottom: 20px;
    color: #c4cfde;
}

.descraption {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: #c4cfde;
    line-height: 28px;
}

.CardIcon {
    margin-bottom: 25px;
}

.feather {
    width: 50px;
    height: auto;
    color: #be9852;
    stroke-width: 1 !important;
}

.aboutList:hover .contain:hover {
    transform: translateY(-20px);
    transition: transform 0.5s;
}

.arrowIco-hide {
    transition-property: visibility opacity;
    transition-duration: 0.5s;
    opacity: 0;
    visibility: hidden;
}

.arrowIco-show {
    transition-property: visibility opacity;
    transition-duration: 0.5s;
    opacity: 1;
    visibility: visible;
}


/*****************

              * THIRD SECTION *

              *****************/

.header-portoflio {
    width: 90%;
    margin: 100px auto auto auto;
    text-align: center;
}

.subtitle2 {
    color: #be9852;
    letter-spacing: 1px;
    display: block;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 10px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
}

.title2 {
    font-size: 60px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #c4cfde;
    margin-top: 15px;
    margin-bottom: 0;
}

.portfolio-boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
}

.heartPortfolioSvg {
    display: inline-flex;
    position: relative;
    top: 2px;
}

.portfolio-container2 {
    /* max-width: 24vw; */
    background: #fffcee;
    margin: 60px 13px 0px 13px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.4s !important;
    /* border-top-left-radius: 10px;
    border-top-right-radius: 10px; */
    border-radius: 35px;
}



.Portfolio-Container1 {
    background-color: #2c5f54;
    padding-bottom: 128px;
}

.portfolio-container2:hover {

    background: #3c3c3c;
    /* box-shadow: 5px 6px 2px 6px #3c3c3c, 10px 13px 3px 2px #3c3c3c; */
    transition: all 0.4s !important;
    transform: translate(0px, -30px) !important;
}

/* .portfolio-container2::before{
    content: "hello its yasser allam";
    width: 100%;
    height: 50px;
    background: #3c3c3c;
    border: 0 !important;
    cursor: pointer;
    transition: all 0.4s !important;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
} */

.portfolio-container2:hover::before {
    content: "hello its yasser allam";
    width: 100%;
    height: 50px;
    color: #000;
    /* background: #3c3c3c; */
    border: 0 !important;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    transition: all 0.4s !important;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    z-index: -1;
    transform: translate(0px, 13px);
}

#portfolio-img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.4s;
    backdrop-filter: blur(10px);
}

.Portfo-img {
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
}

#pac-runner::before {
    position: absolute;
    content: "Pac Runner";
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(199, 199, 199);
    font-size: 16px;
    width: 100%;
    height: 100%;
    z-index: 1;
    backdrop-filter: blur(10px);
    transition: all 0.5s;
}

#pac-runner:hover::before {
    z-index: 0;
    backdrop-filter: blur(0px);
    transition: all 0.5s;
}


#Revenge::before {
    position: absolute;
    content: "Revenge";
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(199, 199, 199);
    font-size: 16px;
    width: 100%;
    height: 100%;
    z-index: 1;
    backdrop-filter: blur(10px);
    transition: all 0.5s;
}

#Revenge:hover::before {
    z-index: 0;
    backdrop-filter: blur(0px);
    transition: all 0.5s;
}


#IslandOfTheLastSurvivor::before {
    position: absolute;
    content: "Island Of The Last Survivor";
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(199, 199, 199);
    font-size: 16px;
    width: 100%;
    height: 100%;
    z-index: 1;
    backdrop-filter: blur(10px);
    transition: all 0.5s;
}

#IslandOfTheLastSurvivor:hover::before {
    z-index: 0;
    backdrop-filter: blur(0px);
    transition: all 0.5s;
}

#Gameplay_Tutorial::before {
    position: absolute;
    content: "Gameplay Tutorial";
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(199, 199, 199);
    font-size: 16px;
    width: 100%;
    height: 100%;
    z-index: 1;
    backdrop-filter: blur(10px);
    transition: all 0.5s;
}

#Gameplay_Tutorial:hover::before {
    z-index: 0;
    backdrop-filter: blur(0px);
    transition: all 0.5s;
}


.portfolio-container2:hover #portfolio-img {
    overflow: hidden;
    transform: scale(1.1);
    transition: transform 0.4s;
    transition: all 0.5s;
}

.category-info {
    display: flex;
    justify-content: space-between;
    margin: 20px 0px 0px 0px;
}

.category-meta {
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.category-list a {
    color: #be9852;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    text-decoration: none;
    outline: none;
    transition: all 0.4s;
}

.portfolio-container2:hover .category-list a {
    color: #ffffff;
    transition: all 0.4s;
}

.describtion2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 34px;
    word-break: break-word;
    color: #878e99;
    transition: all 0.4s;
}

.portfolio-container2:hover .describtion2 {
    transition: color 0.4s;
    color: #ffffff;
    transition: all 0.4s;
}

#arrowPortfolioImg {
    display: inline-flex;
    position: relative;
    left: 5px;
    top: 2px;
    transition: width 0.4s;
}



.arrowShow {
    width: 0%;
}

.portfolio-container2:hover .arrowShow {
    width: 5%;
}

.h4PortfolioTitle {
    display: inline;
}

.hideTheFlyDiv1,
.hideTheFlyDiv2,
.hideTheFlyDiv3,
.hideTheFlyDiv4,
.hideTheFlyDiv5,
.hideTheFlyDiv6 {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    z-index: 100;
    background: #212428;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
    transition-duration: 0.4s;
}

.flyingDiv {
    width: 100%;
    height: 100%;
    padding: 45px;
    position: fixed;
    margin: 0 auto;
    top: 0px;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    overflow-y: scroll;
    background: #6d6c6c7c;
}

.portfolioShower {
    background-color: linear-gradient(145deg, #1e2024);
    background: #fffcee;
    box-shadow: 1px 1px #b1b1b1, 2px 2px #b1b1b1, 3px 3px #b1b1b1, 4px 4px #b1b1b1, 5px 5px #b1b1b1, 6px 6px #b1b1b1, 7px 7px #b1b1b1, 8px 8px #b1b1b1;
    width: 70vw;
    margin: 90px auto;
    padding: 45px;
    display: flex;
    border-radius: 20px;
    transition: all 0.4s;
}

.showImg {
    width: 52%;
    display: flex;
    align-items: center;
}

.PortfoiloImg {
    width: 100%;
    height: 300px;
    padding: 15px;
    border-radius: 25px;
    object-fit: cover;
    overflow: hidden;
    object-position: 0% 0%;
    cursor: pointer;
}

.flyingDiv #ecomImg {
    object-position: 0% 0%;
    transition: all 0.4s;
    animation: myfirst 8s linear 0s infinite alternate;
}

.flyingDiv #rainbowitImg {
    object-position: 0% 0%;
    transition: all 0.4s;
    animation: myfirst 23s linear 0s infinite alternate;
}

.flyingDiv #smartImg {
    object-position: 0% 0%;
    transition: all 0.4s;
    animation-direction: alternate;
    animation: myfirst 15s linear 0s infinite alternate;
}

.flyingDiv #netstormImg {
    object-position: 0% 0%;
    transition: all 0.4s;
    animation: myfirst 8s linear 0s infinite alternate;
}

.flyingDiv #carDetails {
    object-position: 0% 0%;
    transition: all 0.4s;
    animation: myfirst 1.5s linear 0s infinite alternate;
}

@keyframes myfirst {
    0% {
        object-position: 0% 0%;
    }

    25% {
        object-position: 0% 25%;
    }

    75% {
        object-position: 0% 75%;
    }

    100% {
        object-position: 0% 100%;
    }
}

.showDescribtions {
    width: 50%;
}

.contactShower {
    margin: 20px auto auto 40px;
}

.contactSection {
    background-color: #2c5f54;
}

.titleOfFlyingDescribtion {
    font-family: 'Montserrat', sans-serif;
    color: #b4b4b4;
    margin-bottom: 20px;
    font-size: 34px;
    font-weight: 700;
}

.headTitleOfFlyingDescribtion {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

.md-typo-of-flying-describtion {
    color: #878e99;
    font-size: 18px;
    line-height: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    width: 93%;
    margin-bottom: 30px;
}

.md-typo-of-flying-describtion2 {
    color: #878e99;
    font-size: 18px;
    line-height: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    width: 93%;
}

.buttons {
    width: 90%;
    margin: 30px auto auto 40px;
    display: flex;
    gap: 31px;
    justify-content: flex-end;
}

.likeBtn {
    text-transform: uppercase;
    width: 140px;
    height: 55px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #be9852;
}

.viewBtn {
    text-transform: uppercase;
    width: 180px;
    height: 55px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #be9852;
}

.closeIco {
    position: relative;
    right: 0px;
    top: 4px;
}

.closeIco:hover {
    filter: #be9852;
}

.closeDiv {
    width: fit-content;
    background: #fffcee;
    box-shadow: 1px 1px #b1b1b1, 2px 2px #b1b1b1;
    border-radius: 50%;
    float: right;
    transition: transform background-color box-shadow;
    transition-duration: 0.5s;
    cursor: pointer;
    height: fit-content;
    transform: translateY(-28px);
}

.closeDiv:hover {
    transform: translateY(-33px);
    background: #be9852;
    box-shadow: 1px 1px 0px 0px #be9852, 2px 1px 0px 1px #be9852;
    transition-property: transform background-color box-shadow;
    transition-duration: 0.5s;
}

.main {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.up {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.down {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.card1 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 90px 5px 5px 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
}

.instagram {
    margin-top: 1.5em;
    margin-left: 1.2em;
    fill: #cc39a4;
}

.card2 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 90px 5px 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
}

.twitter {
    margin-top: 1.5em;
    margin-left: -.9em;
    fill: #03A9F4;
}

.card3 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 5px 5px 90px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
}

.github {
    margin-top: -.6em;
    margin-left: 1.2em;
}

.card4 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 5px 90px 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
}

.discord {
    margin-top: -.9em;
    margin-left: -1.2em;
    fill: #8c9eff;
}

.card1:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #cc39a4;
}

.card1:hover .instagram {
    fill: white;
}

.card2:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #03A9F4;
}

.card2:hover .twitter {
    fill: white;
}

.card3:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: black;
}

.card3:hover .github {
    fill: white;
}

.card4:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #8c9eff;
}

.card4:hover .discord {
    fill: white;
}








/******************

            * FORITH SECTION *

            ******************/

.header-container {
    text-align: center;
    margin: 95px auto 65px auto;
}

.headerParagrafe {
    text-transform: uppercase;
    color: #be9852;
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
}

.headerTitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 60px;
    color: #c4cfde;
}


.resumeHolder {
    background-color: #fffcee;
    border-radius: 10px;
    display: inline-flex;
}

.carousel-indicators .active {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 8px;
    background-color: #be9852 !important;
    box-shadow: 1px 4px 2px -3px rgba(0, 0, 0, 0.7) inset, -1px -3px 3px -2px rgba(255, 255, 255, 0.2) inset;
    transition: background-color 1s;
}

.carousel-indicators {
    z-index: 1;
}

#active {
    background-color: #f8f8f8dd;
    box-shadow: 1px 1px #b1b1b1, 2px 2px #b1b1b1, 3px 3px #b1b1b1, 4px 4px #b1b1b1, 5px 5px #b1b1b1, 6px 6px #b1b1b1, 7px 7px #b1b1b1, 8px 8px #b1b1b1;
    color: #be9852;
}

.testimonalContainer {
    display: flex;
    position: absolute;
    width: 300%;
    overflow: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 24px;
    scroll-snap-align: start;
}

.containers {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 40px;
    position: relative;
}

.TestimonalContainers {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 40px;
    left: 200px;
}

.resumeCreator {
    font-size: 18px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    text-transform: capitalize;
    outline: none;
    border: 0 none;
    transition: all 0.5s;
    background: transparent;
    border-radius: 10px;
    background-color: linear-gradient(145deg, #1e2024, #23272b);
}

.choosenTitle {
    padding: 28px 87px;
    font-size: 18px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    border-radius: 10px;
    color: #878e99;
    /* color: #be9852; */
    transition-property: all;
    transition-duration: 0.5s;
}

.choosenTitle:hover {
    color: #be9852;
}


.Resume-section {
    padding-bottom: 100px;
    height: 100%;
    margin: 0 auto;
}

.education {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 0px 45px;
    transition-property: opacity visibility;
    transition-duration: 0.5s;
}

.right-details {
    width: 55%;
    padding: 0px 40px 0px 0px;
    display: flex;
    justify-content: space-around;
}

.left-details {
    padding-right: 40px;
    width: 40rem;
}

.p-detalis {
    margin: 0px;
    color: #be9852;
    letter-spacing: 2px;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}

.h-details {
    font-size: 36px;
    line-height: 62px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #c4cfde;
}

.personal-portfolio {
    background-color: #fffcee;
    box-shadow: 1px 1px #b1b1b1, 2px 2px #b1b1b1, 3px 3px #b1b1b1, 4px 4px #b1b1b1, 5px 5px #b1b1b1, 6px 6px #b1b1b1, 7px 7px #b1b1b1, 8px 8px #b1b1b1;
    padding: 45px 40px;
    border-radius: 6px;
    margin-top: 50px;
    z-index: 1;
    transition: all 0.4s !important;
}

.personal-portfolio:hover {
    background: #be9852;
    box-shadow: 3px 0px 0px 1px #be9852, 11px 2px 0px 3px #be9852;
    transition: all 0.4s !important;
}

.personal-container {
    padding-left: 31px;
}



.title-personal1,
.title-personal2 {
    color: #be9852;
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    line-height: 39px;
    margin-bottom: 7px;
    font-weight: 500;
    transition: 0.4s;
    width: 90%;
    transition: color 0.5s;
}

.personal-portfolio:hover .title-personal1,
.personal-portfolio:hover .title-personal2,
.personal-portfolio:hover .personal-describtion,
.personal-portfolio:hover .subtitle-personal {
    color: #fff;
    transition: color 0.5s;
}

.subtitle-personal {
    color: #878e99;
    display: block;
    font-size: 17px;
}

.personal-describtion {
    font-size: 18px;
    line-height: 28px;
    color: #878e99;
    transition: 0.5s;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.personal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #1a1d23;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.title-personal1::before,
.title-personal2::before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    border: 5px solid #c9cccf;
    border-radius: 100%;
    transform: translateX(-82px);
    background: #fff;
    transition: background-color 0.4s;
}

.personal-portfolio:hover .title-personal1::before {
    background-color: #be9852;
    transition: background-color 0.4s;
}

.personal-portfolio:hover .title-personal2::before {
    background-color: #be9852;
    transition: background-color 0.4s;
}

.personalSection-container1::before,
.personalSection-container2::before {
    position: absolute;
    content: "";
    width: 25px;
    height: 5px;
    transform: translateX(-65px) translateY(44px);
    background: #c9cccf;
    transition: var(--transition);
}



.score {
    padding: 7px 16px;
    border-radius: 7px;
    color: #be9852;
    background-color: #E3F1FF;
    box-shadow: 6px 5px 0px 0px #aac9ad, 4px 3px 0px 2px #aebdb3;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
}

.eductionContainers {
    border-left: 5px solid #c9cccf;
}

.ShowEducation {
    display: inline-flex;
    width: 80%;
    height: 100%;
    justify-content: center;
    transition-property: opacity visibility;
    transition-duration: 1.4s;
}

.HideEducation {
    display: inline-flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    padding: 0px 45px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition-property: all opacity visibility;
    transition-duration: 1.4s;
}

.ShowInterview {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 0px 45px;
    transition-property: opacity visibility;
    transition-duration: 1.4s;
}

.HideInterview {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 0px 45px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition-property: all opacity visibility;
    transition-duration: 1.4s;
}

.ShowExperiences {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 0px 45px;
    transition-property: opacity visibility;
    transition-duration: 1.4s;
}

.HideExperiences {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 0px 45px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition-property: opacity visibility;
    transition-duration: 1.4s;
}

.ShowProfessional {
    display: inline-flex;
    justify-content: center;
    width: 80%;
    height: 100%;
    padding: 0px 22px;
    transition-property: opacity visibility;
    transition-duration: 1.4s;
}

.HideProfessional {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 0px 45px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition-property: all opacity visibility;
    transition-duration: 1.4s;
}


/****************************

* PROFESSIONAL BAR SECTION *

****************************/

.ProfessionalContainers {
    margin-top: 22px;
}

.progress-bar {
    height: 16px;
    visibility: visible;
    overflow: visible;
    position: relative;
    border-radius: 14px;
    background: #be9852 !important;
}

.fadeIt .progress-bar {
    animation: fadeInLeft;
    animation-duration: 0.7s;
}

@keyframes fadeInLeft {
    0% {
        width: 0%;
    }
}

.progress {
    height: 12px;
    overflow: visible;
    font-size: 14px;
    border-radius: 10px;
    background: #000;
    box-shadow: inset 8px 8px 16px rgb(0 0 0 / 46%), inset -8px -8px 16px rgb(56 62 69 / 46%);
}

.percent-label {
    position: absolute;
    right: -7px;
    top: -22px;
    font-weight: 400;
    color: #c3cedd;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
}

.heading-h6 {
    width: 140px;
    height: 130px;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    border-radius: 50%;
    margin-bottom: 15px;
    color: #be9852;
    box-shadow: 5px 3px 6px #8b8b8b;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 1.9;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    background-color: rgb(0 0 0);
    transition: all 0.5s;

}

.heading-h6:hover {
    box-shadow: 0px 0px 26px #383838;
    transition: all 0.5s;
    transform: scale(1.1);
}

.professionalCreators {
    margin-top: 32px;
}


/*******************

        * CONTACT SECTION *

        *******************/

.contact-header-container-l {
    width: 70%;
    margin: 45px auto;
}

.contact-container {
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.contact-img-container {
    overflow: hidden;
    border-radius: 10px;
}

.left-contact {
    width: 22vw;
    background-color: #fffcee;
    box-shadow: 0px 1px 11px 4px #717171;
    padding: 30px 30px 0 30px;
    border-radius: 10px;
    transition: all 0.4s;
    background-image: url("img/yasser-portfolio-images/island-of-the-last-survivor-Screenshots/pac20.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.left-contact:hover {
    transition: all 0.4s;
}

.contact-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.4s;
}

.contact-describtion {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    margin-top: 7px;
    margin-bottom: 15px;
    color: #ffff;
}

.contact-img:hover {
    transform: scale(1.1);
    transition: transform 0.4s;
}

.left-contact .Cards-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #ffff;
    font-size: 29px;
    line-height: 34px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.description1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #c4cfde;
    opacity: 0.9;
    margin-bottom: 39px
}

.description1 p {
    margin-bottom: 20px;
    color: #ffff;
}

.phone,
.mail {
    display: flex;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #ffff;
    line-height: 27px;
}

.phone a,
.mail a {
    color: #ffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-transform: lowercase;
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    left: 4px;
    overflow: hidden;
    transition: 0.4s;
    letter-spacing: 0px;
}

.phone a:hover,
.mail a:hover {
    transition: 0.4s;
    color: #be9852;
}

.phone a:before,
.mail a:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #be9852;
    height: 1px;
    transition-property: right;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.phone a:hover:before,
.mail a:hover:before,
.phone a:focus:before,
.mail a:focus:before,
.phone a:active:before,
.mail a:active:before {
    right: 0;
}

.name {
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 8px;
}

.social-icone {
    margin-top: 24px;
    display: flex;
    gap: 5px;
    padding-bottom: 26px;
}

.social-icone .feather-facebook,
.social-icone .feather-linkedin,
.social-icone .feather-instagram {
    width: 1.5vw;
    height: 2vh;
    stroke-width: 2;
    padding: 20px;
    color: #c4cfde;
    transition: 0.4s;
    line-height: 57px;
    margin-right: 15px;
    box-shadow: 1px 1px #b1b1b1, 2px 2px #b1b1b1, 3px 3px #b1b1b1, 4px 4px #b1b1b1, 5px 5px #b1b1b1, 6px 6px #b1b1b1, 7px 7px #b1b1b1, 8px 8px #b1b1b1;
    border-radius: 6px;
    transition: 0.4s;
    display: inline-block;
    text-align: center;
}

.social-icone .feather-facebook:hover,
.social-icone .feather-linkedin:hover,
.social-icone .feather-instagram:hover {
    transform: translateY(-5px);
    transition: 0.4s;
}

.social-icone .feather-facebook:hover {
    background-color: #3265a8;
}

.social-icone .feather-linkedin:hover {
    background-color: #7faeec;
}

.social-icone .feather-instagram:hover {
    background-color: #C13584;
}

.right-contact {
    width: 25.6vw;
    background-color: #000;
    box-shadow: 0px 1px 11px 4px #717171;
    border-radius: 10px;
    padding: 32px 32px 20px 32px;
    transition: all;
    height: 800px;
}


.form-group input {
    margin-bottom: 20px;
}

.form-group input {
    background-color: #8b8b8b;
    border-radius: 6px;
    height: 55px;
    width: 100%;
    border: 0px solid transparent;
    padding: 0 15px;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    color: #c4cfde;
    box-shadow: 1px 4px 2px -3px rgba(0, 0, 0, 0.7) inset, -1px -3px 3px -2px rgba(255, 255, 255, 0.2) inset;
    letter-spacing: 1px;
    transition: 0.5s;
}

.form-group input:focus {
    transition: 0.5s;
    color: #191b1e;
    background-color: #ffffff;
    outline: 2px solid #be9852;
}

.form-group textarea {
    background-color: #8b8b8b;
    border-radius: 6px;
    min-height: 205px;
    height: 215px;
    width: 100%;
    border: 0px solid #191b1e;
    padding: 10px 15px;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    color: #c4cfde;
    box-shadow: 1px 4px 2px -3px rgba(0, 0, 0, 0.7) inset, -1px -3px 3px -2px rgba(255, 255, 255, 0.2) inset;
    letter-spacing: 1px;
    resize: none;
    transition: 0.4s;
}

.form-group textarea:focus {
    transition: 0.4s;
    color: #191b1e;
    outline: 2px solid #be9852;
    background-color: #ffffff;
}

.form-group label {
    padding-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rn-btn {
    border-radius: 6px;
    background: #fffcee;
    box-shadow: 1px 0px 1px 1px #b1b1b1, 2px 2px #b1b1b1, 3px 3px #b1b1b1, 4px 4px #b1b1b1, 5px 4px #b1b1b1, 6px 6px #b1b1b1, 7px 7px #b1b1b1, 8px 8px #b1b1b1;
    position: relative;
    z-index: 2;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    border: 0 none;
    display: flex;
    justify-content: center;
    color: #be9852;
    list-style: none;
    text-decoration: none;
    padding: 16px;
    transition: all 0.4s;
}

.rn-btn:hover {
    transition: all 0.4s;
    transform: translateY(-5px);
    background: #be9852;
    color: #fff;
    box-shadow: 3px 0px 0px 1px #be9852, 11px 2px 0px 3px #be9852;
}

.contact-btn {
    padding: 15px 13px;
    z-index: 1;
}

.contact-btn button svg {
    width: 24px;
    height: 24px;
    position: relative;
    bottom: 2px;
    left: 3px;
}


/******************

 * FOOTER SECTION *

******************/

.footer-container {
    padding-top: 100px;
    background-color: #2c5f54;
}

.footer {
    padding: 52px 0 100px 0;
    margin-top: 20px;
}

.footer p {
    font-size: 17px;
    color: #878e99;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    text-align: center;
    margin-top: 20px;
}

.footer-logo {
    margin: 10px auto;
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    position: relative;
    top: 10px;
    transform: translate(-13px, 10px);
}

.footer p span {
    color: #878e99;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
    transition: 0.4s;
    letter-spacing: 0px;
}

.footer p span:hover {
    transition: 0.4s;
    color: #be9852;
}

.footer p span:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #be9852;
    height: 1px;
    transition-property: right;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.footer p span:hover:before,
.footer p span:focus:before,
.footer p span:active:before {
    right: 0;
}

.personal-footer-img {
    width: 11%;
}


.vid {
    object-fit: cover;
    width: 65%;
    /* height: fit-content;     */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}


.portfoliodisplay {
    object-fit: cover;
    width: 500px;
    height: 280px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}

/* .last-surviver-header {
    font-size: 45px;
    color: #be9852;
    margin-bottom: 80px;
    margin-left: 190px;
} */

.project-container {
    background-color: #000;
    color: #fff;
}

.project-details {
    width: 90%;
    margin: 20px auto;
}

.project-details p {
    margin-top: 20px;
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 1px;
    margin: 20px auto 0px auto;
}

.project-details-header {
    margin-bottom: 50px;
    margin-top: 50px;
    align-items: center;
    text-align: center;
    letter-spacing: 15px;
    text-transform: uppercase;
    color: #be9852;
}
@media (width < 768px) {
    .project-details-header {
        margin-bottom: 30px;
        margin-top: 25px;
    }
}

.horizontal-Line{
    width: 50% !important;
}

.achivement-details {
    display: flex;
    width: 90%;
    margin: 140px auto 0 auto;
    justify-content: center;
    align-items: center;
    gap: 40px;

}
.grid-images {
  display: grid;
/* 2 columns on desktop */
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  max-width: 80%;
  margin: 30px auto;
  padding: 10px;
}

@media (max-width: 600px) {
  .grid-images {
    /* 1 column on mobile */
    grid-template-columns: 1fr;
    margin: 20px auto;
  }
}
.grid-images > img {
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 3px 0px 54px 1px #1c1e22, 1px -1px 8px #262a2e;
  width: 100%;
}

@media (width < 768px) {
    .game-system-description {
        padding: 0 10px;
    }

}
@media (width > 768px) {
    .game-system-description {
        font-size: 20px;
    }

}

.achivement-details img {
    height: 430px;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 3px 0px 54px 1px #1c1e22, 1px -1px 8px #262a2e;
}

.achivement-details p {
    width: 100%;
    padding: 0 120px 0 0;
    font-size: 20px;
    line-height: 2;
    color: #c5c5c5;
    font-family: system-ui;
    margin: 0;
}

#achivement-details2 p {
    width: 100%;
}

.explanation-about-game {
    display: flex ;
    justify-content:space-between;
    font-size: large;
    font-size: 14px;
    width: 65%;
    margin: 10px auto;
    /* margin-left: 340px; */
    margin-bottom: 10px;
    flex-direction: column;
}

.toolsTitle{
    color: rgb(190, 152, 82);
    font-size: 20px;
}

.tools-details{
    color: #b9b9b9;
    font-size: 17px;
}

.mytools-details{
     color: #b9b9b9;
    font-size: 13px;
}


.downloadBtn {
    width: 90%;
    margin: 120px auto 10px auto;
    text-align: center;
    justify-content: center;
    display: flex;
}
@media (width < 768px) {
    .downloadBtn {
        margin-top: 70px;
    }

}

.achivement2 {
    /* flex-direction: row-reverse; */
}



/**********************
 *   update footer *
    **********************/


#EndPage {
    /* height: 520px; */
    background-color: #000000;
    color: #e1e1e1;
    padding: 9% 5% 0% 5%;
    position: relative;
    z-index: 3;
}

.logoEndPage {
    margin-bottom: 20px;
}

/* items part */

.footerItems {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

/* icons end Page */

.Icons {
    margin-top: 13px;
    margin-left: 4px;
    font-size: 18px;
    border-radius: 3px;
    position: relative;
    display: grid;
    transition: all 0.4s;
    height: 39px;
    overflow: hidden;
}

.ico {
    cursor: pointer;
    background-color: #222;
    position: relative;
    transition: all 0.4s;
    padding: 10px 12px 10px 12px;
}

.Icons:hover .ico {
    transform: translateY(-38px);
}

.Icons:hover .ico2 {
    transform: translateY(-38px);
}

.ico2 {
    cursor: pointer;
    background-color: #222;
    padding: 10px 12px 10px 12px;
    position: relative;
    font-size: 18px;
    transition: all 0.4s;
}

.footerIco {
    display: flex;
    transition: all 0.4s;
}

.footerIco:hover .ico2 {
    /* opacity: 0; */
    transform: translateY(-38px);
    transition: all 0.4s;
    /* transition-duration: 0.25s; */
    visibility: visible;
}

.footerIco:hover .ico {
    transform: translateY(-38px);
    transition: all 0.4s;
}

.iconsEndPage {
    display: inline-flex;
    gap: 5px;
    position: relative;
}

.item2 {
    line-height: 20px;
}

.footerHeaderText {
    font-size: 25px;
    font-family: 'Dongle', sans-serif;
    position: relative;
    bottom: 10px;
    margin-bottom: 80px;
    transform: skewY(-14deg);
}

.footerPara {
    position: relative;
    bottom: 10px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    cursor: pointer;
}

.mailInserter {
    display: flex;
}


















/* From Uiverse.io by andrew-demchenk0 */
/* you can choose any color you want. don't be afraid to experiment  */

.input,
.submitBtn {
    width: 100%;
    height: 40px;
    position: relative;
    padding: 10px;
    border: 0.1px solid #575cb5;
    color: #fff;
}



.submitBtn {
    background: #777777;
    border: none;
}

.wrapper {
    position: relative;
    transform: skewY(-14deg);
}

.wrapper li,
.submitBtn {
    position: relative;
    list-style: none;
    width: 200px;
    z-index: var(--i);
    transition: 0.3s;
    color: white;
}

.wrapper li::before,
.submitBtn::before {
    position: absolute;
    content: '';
    background: #777777;
    top: 0;
    left: -40px;
    width: 40px;
    height: 40px;
    transform-origin: right;
    transform: skewY(45deg);
    transition: 0.3s;
}

.wrapper li::after,
.submitBtn::after {
    position: absolute;
    content: '';
    background: #777777;
    width: 200px;
    height: 40px;
    top: -40px;
    left: 0;
    transform-origin: bottom;
    transform: skewX(45deg);
    transition: 0.3s;
}

.wrapper li:nth-child(1)::after,
.wrapper li:nth-child(1)::before {
    background-color: #161616;
}

.wrapper li:nth-child(2)::after,
.wrapper li:nth-child(2)::before {
    background-color: #161616;
}

.wrapper li:nth-child(3)::after,
.wrapper li:nth-child(3)::before {
    background-color: #161616;
}

li .input {
    outline: none;
    border: none;
    color: rgb(255, 255, 255);
}

li .input::placeholder {
    color: rgb(247, 247, 247);
}

li:nth-child(1) .input {
    background: #161616;
}

li:nth-child(2) .input {
    background: #161616;
}

li:nth-child(3) .input {
    background: #0f0f0f;
}


li:nth-child(1) .input:focus {
    outline: none;
    border: 3.5px solid #777777;
}

li:nth-child(2) .input:focus {
    outline: none;
    border: 3.5px solid #777777;
}

li:nth-child(3) .input:focus {
    outline: none;
    border: 3.5px solid #777777;
}

.wrapper li:hover,
.submitBtn:hover {
    transform: translateX(-20px);
}

.submitBtn:hover,
.submitBtn:hover::before,
.submitBtn:hover::after {
    background: #575cb5;
}

.submitBtn:active {
    transform: translateX(0px);
}

.footerInput {
    position: relative;
    left: 4px;
    bottom: 10px;
    width: 140%;
    height: 45px;
    border-radius: 5px;
    border: 0px;
    background-color: #191919;
    padding-left: 30px;
    color: rgb(255, 255, 255);
    outline-style: unset;
}

.footerBtn {
    border: 0;
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    width: 35%;
    z-index: 1;
    position: relative;
    right: 13px;
    bottom: 10px;
    padding: 12px;
    background-image: linear-gradient(150deg, #57048a 0%, #4528dc 78%);
    color: #fff;
}

.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
    /* position: relative;
top: 105px;
left: 40px; */
    height: 70px;
    padding-top: 25px;
}

.item1 {
    width: 20%;
}

.footerText1 {
    float: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.footerText2 {
    float: right;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}


/**********************
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
 

 * END OF THE WEBSITE *

    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /
    /


**********************/


/*************************************



 * START MAKE THE WEBSITE RESPONSIVE *



*************************************/

@media screen and (min-width: 1821px) {
    .nav-link {
        font-size: 15px;
    }

    #NavSignUpBtn {
        font-size: 15px;
    }

    /*  */
    /************************
        /
        /
        /
        welcome section
        /
        /
        /

    * ************************/
    /*  */
    .welcomeToMyWebSite {
        padding-top: 57px;
    }

    .typo {
        font-size: 65px;
    }

    .typoChanger {
        font-size: 28px;
    }

    .pleasureLine {
        font-size: 26px
    }

    .description {
        font-size: 20px;
    }

    .left-and-right-buttons {
        width: 78%;
    }


    .contact-btn {
        position: relative;
        top: 35px;
    }

    .social-area {
        margin-top: 100px;
    }


    /*  */
    /************************
        /
        /
        /
        ABOUT SECTOIN 
        /
        /
        /

    * ************************/
    /*  */
    .subtitle {
        font-size: 26px;
    }

    .AboutTitle {
        font-size: 60px;
    }

    .about-title {
        font-size: 3.6rem;
    }

    .about-decribtion {
        font-size: 21px;
        line-height: 37px;
    }

    /*  */
    /************************
        /
        /
        /
        RESUME SECTION  
        /
        /
        /

    * ************************/
    /*  */
    .ShowEducation {
        width: 85%;
        gap: 52px;
    }

    .headerParagrafe {
        font-size: 21px;
    }

    .headerTitle {
        font-size: 54px;
    }

    #active {
        font-size: 22px;
    }

    .choosenTitle {
        font-size: 22px;
    }

    .p-detalis {
        font-size: 20px;
    }

    .h-details {
        font-size: 40px;
    }

    .ShowProfessional {
        width: 80%
    }



    .score {
        font-size: 20px;
    }

    .personal-describtion {
        font-size: 23px;
    }
}

@media screen and (max-width: 840px) {
    .hireMe-part {
        width: 100%;
    }

    #changeColor {
        padding-left: 11px;
        display: grid;
        justify-content: start;
        width: 36vw;
    }





    /*******************
 * WELCOME SECTION *
*******************/
    #collapse {
        width: 80%;
        justify-content: center;
        display: flex;
        margin-left: 0;
        display: grid;
        width: 100%;
        height: 0;
        overflow: hidden;
        transition: all 0.4s;
    }

    #collapsed {
        height: 100%;
        transition: all 0.4s;
    }

    .typo {
        font-size: 60px;
    }

    .typoChanger {
        font-size: 28px;
    }

    .left-contanir div {
        margin-top: 20px;
        text-align: center;
    }

    .description {
        font-size: 23px;
        width: 100%;
        max-width: 100%;
        margin-bottom: 80px;
        color: #fff;
        padding: 0 36px;

    }

    .left-contanir {
        width: 100%;
        margin: 0 auto;
    }

    .iconHolder {
        width: 100%;
    }

    .icons-continer-section {
        width: 100%;
        display: block;
        margin-top: 0;
        height: 100%;
    }

    .titleForIcons {
        margin-top: 25px;
    }

    .welcomeToMyWorldSection-continer {
        display: inline-table;
        width: 100%;
    }

    .description .icons {
        width: 70px;
        height: 67px;
    }

    .welcomeToMyWorldSection-right {
        margin: 20px auto;
        background-image: none;
        position: relative;
        bottom: 50px;
        text-align: center;
    }


    .personal-img {
        width: 100%;
        border-radius: 50%;
        height: auto;
    }

    .welcomeToMyWorldSection-left {
        display: table-footer-group;
    }

    .title {
        font-size: 40px;
    }

    .featuresList {
        display: flex;
        width: 100%;
        margin: 40px auto;
        height: auto;
    }

    .feild {
        display: block;
        justify-content: center;
        margin-left: 0px;
        position: relative;
    }

    .contain {
        padding: 40px 5px 0px 15px;
    }

    /* 
    
    
    */
    /********************
 * about SECTION *
********************/
    /* 


 */
    .about-continer {
        display: block;
        text-align: center;
    }

    .about-title {
        padding: 0 20px;
        margin: 0 auto;
    }

    .about-decribtion {
        padding: 0 20px;
        margin: 0 auto;
    }

    .Toggle-btn {
        display: block;
        position: absolute;
        top: 30px;
        right: 20px;
    }

    .container-fluid {
        display: grid;
        justify-content: space-between;
        align-items: flex-start;
    }



    .about-right-img-section {
        width: auto;
    }

    .about-right-img-section img {
        height: auto;
    }

    .about-left-sectiom {
        width: 100%;
    }




    */

    /********************
 * PORTFILO SECTION *
********************/
    .flyingDiv {
        padding: 15px 11px;
    }

    .portfolio-boxes {
        /* display: block; */
        width: 93%;
    }

    .achivement-details p{
        padding: 0;
        text-align: center;
    }

    .portfolio-container {
        width: 97%;
        margin: 60px 13px 0px 11px;
    }

    .personal-portfolio {
        padding: 45px 22px;
        background-color: #fffcee;
        transition: all background 0.4s !important;
    }

    .showImg {
        width: 100%;
    }

    .portfolioShower {
        display: block;
        border-radius: 10px;
        padding: 45px 15px;
        margin: 0;
        margin-top: 271px;
        width: 100%;
    }

    .closeDiv {
        right: 34px;
        top: 103px;
    }

    .closeIco {
        right: 0px;
        top: 4px;
    }

    .showDescribtions {
        width: 100%;
    }

    .contactShower .titleOfFlyingDescribtion {
        font-size: 34px;
    }

    .contactShower .headTitleOfFlyingDescribtion {
        font-size: 16px;
        color: #878e99;
    }

    #signUpBtn {
        margin: 10px 0px;
    }

    .showDescribtions .buttons {
        margin: 0;
        display: grid;
        padding-left: 20px;
        justify-content: flex-start;
    }

    .contactShower {
        margin: 20px auto auto 20px;
    }

    .PortfoiloImg {
        cursor: pointer;
        height: 200px;
        padding: 0;
    }

    .portfolio-container2 {
        max-width: 100%;
    }

    .achivement-details {
        flex-direction: column;
    }


    /**********************
  * my resume SECTION *
***********************/

    .skills-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .resumeHolder {
        display: block;
        border-radius: 10px;
    }

    .ShowEducation {
        width: 90%;
        display: block;
        padding: 0px 9px;
    }

    .personal-container {
        padding-left: 10px;
    }

    .title-personal1::before {
        transform: translateX(-44px);
    }

    .personalSection-container1::before {
        transform: translateX(-42px) translateY(7px);
        z-index: 0;
    }

    .personalSection-container2::before {
        transform: translateX(-42px) translateY(7px);
        z-index: 0;
    }

    .personalSection-container1::before,
    .personalSection-container2::before {
        width: 20px;
    }

    .title-personal2::before {
        transform: translateX(-44px);
    }

    .personal-header {
        display: block;
    }

    .h-details {
        font-size: 28px;
    }

    .p-detalis {
        font-size: 16px;
    }

    .right-details {
        padding: 0;
        margin-bottom: 60px;
        width: auto;
        flex-direction: column;
    }

    .left-details {
        padding: 0;
        width: auto;
    }

    .containers {
        text-align: center;
    }

    .ShowProfessional {
        display: block;
    }

    .ShowExperiences {
        display: block;
        padding: 0px 9px;
    }

    .ShowInterview {
        display: block;
        padding: 0px 9px;
    }

    /*******************
 * CONTACT SECTION *
*******************/
    .contact-container {
        display: block;
        width: 83vw;
    }

    .left-contact {
        width: 100%;
        padding-bottom: 41px;
        margin-bottom: 34px;
    }

    .right-contact {
        width: 100%;
        padding-bottom: 41px;
    }

    .social-icone {
        display: flex;
    }



    /******************
 * FOOTER SECTION *
******************/
    .footer-container {
        margin-left: 12px;
    }


    .welcome-carousel-img {
        object-fit: cover;
    }

    .item1 {
        width: 100%;
        text-align: center;
    }

    .footerItems {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 60px;
    }

    .footer p {
        margin-top: 0;
    }

    body {
        cursor: none;
    }

    .image-project-container img {
        height: auto;
        width: 100%;
    }

    .achivement-details img{
        width: 100%;
        height: auto;
    }

    .vid{
        width: 90%;
    }

    .Portfo-img{
        cursor: none;
    }

    li .input{
        cursor: none;
    }
    .btn{
        cursor: none;
    }
}