.container {
      display: flex;
      flex-direction: column;
      background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1500' height='700' preserveAspectRatio='none' viewBox='0 0 1500 700'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1249%26quot%3b)' fill='none'%3e%3crect width='1500' height='700' x='0' y='0' fill='url(%26quot%3b%23SvgjsRadialGradient1250%26quot%3b)'%3e%3c/rect%3e%3cpath d='M1500 0L1360.93 0L1500 245.81z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M1360.93 0L1500 245.81L1500 439.2L617.7700000000001 0z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M617.77 0L1500 439.2L1500 495.94L272.91999999999996 0z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M272.9200000000001 0L1500 495.94L1500 500.27L131.47000000000008 0z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M0 700L675.02 700L0 524.99z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M0 524.99L675.02 700L883.43 700L0 402.25z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M0 402.25L883.43 700L1059.3799999999999 700L0 276z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M0 276L1059.3799999999999 700L1342.6599999999999 700L0 135.22z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1249'%3e%3crect width='1500' height='700' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='100%25' cy='100%25' r='1655.29' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1250'%3e%3cstop stop-color='%230e2a47' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 69%2c 158%2c 1)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e") no-repeat center/cover;
}

/* -------Navbar---------- */


.header {
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 9;
}

.header_logo {
      left: 3rem;
      margin-top: 0.3125rem;
      position: fixed;
      top: 5rem;
}

.header_logo a {
      cursor: pointer;
      display: inline-block;
      outline: none !important;
}

.header_logo img {
      width: 35px;
      height: 35px;
      object-fit: contain;
}

.header_menu {
      position: fixed;
      right: 3rem;
      top: 2rem;
}

.header_menu a {
      display: block;
      line-height: 1;
      padding: 0.25rem 0;
      position: relative;
      text-align: right;
}

.list {
      font-size: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      justify-content: center;
      transform: translateY(11px);
      transition: transform 0.3s ease;
}


.listmenu_item_inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
      gap: 0.3rem;
      height: 25px;
      width: 70px;
}

.listmenu_item_link {
      font-size: 22px;
      font-weight: 600;
      height: 30px;
      font-family: var(--p-font);
}

.list .listmenu_item_link__active {
      opacity: 1;
      color: var(--buff);
      transition: .5s ease;
}

.list .listmenu_item_link__deep {
      opacity: 0;
      transition: .5s ease;
      color: var(--cornsilk);
}

.list:hover .listmenu_item_link__active {
      opacity: 0;
      transform: translateY(-30px);
}

.list:hover .listmenu_item_link__deep {
      opacity: 1;
      transform: translateY(-30px);
}


.menu_item .is-active .listmenu_item_link__active {
      opacity: 0;
      transform: translateY(-30px);
}

.menu_item .is-active .listmenu_item_link__deep {
      opacity: 1;
      transform: translateY(-30px);
}

.is-active .listmenu_item_link__active {
      opacity: 0;
      transform: translateY(-30px);
}

.is-active .listmenu_item_link__deep {
      opacity: 1;
      transform: translateY(-30px);
}

.socialLink {
      position: fixed;
      top: 32rem;
      left: 3%;
      width: 50px;
}

.socialLink ul {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      align-items: center;
}

.socialLink_li {
      padding: 0.5rem;
}


.socialLink_li a svg {
      color: var(--papaya-whip);
}

.socialLink_li :hover svg {
      color: var(--sinopia);
}


/* ------------------- HERO ------------------- */

#hero {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFF;
}

.details {
      width: 60vw;
      height: 80vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      font-family: var(--p-font);

}

.name {
      font-family: var(--head-font);
      color: var(--gray);
      font-size: 18px;
      letter-spacing: 0.02em;
      line-height: 25px;
      opacity: 0.7;
      width: fit-content;
      font-weight: 600;
}

.postion {
      font-family: var(--head-font);
      color: var(--gray);
      font-size: 18px;
      letter-spacing: 0.02em;
      line-height: 25px;
      opacity: 0.7;
      width: fit-content;
      font-weight: 600;
}

.title {
      position: relative;
      height: 75%;
      display: flex;
      justify-content: center;
}

.hoverTitle {
      position: absolute;
      z-index: 3;
      opacity: 0;
}

.initialTitle {
      position: relative;
      z-index: 2;
}

.hoverTitle,
.initialTitle {
      padding: 1rem 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
}

.initialTitle>p,
.hoverTitle>p {
      font-size: 75px;
      font-family: var(--head-font);
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 80px;
      width: fit-content;
}


.cv {
      padding: 0.3rem .8rem;
      border-radius: 5px;
      border: 3px solid var(--gray);
}

.cv a {
      font-size: 1.7rem;
      line-height: 2rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      font-stretch: 300%;
      font-family: var(--head-main);
      color: var(--orange);
}

/*------------>> ABOUT SECTION <<-------------  */

.aboutMe {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      color: var(--gray);
}

.heading {
      font-size: 20px;
      font-family: var(--p-font);
      font-stretch: 150%;
      color: #FFF;
      padding: 1rem 7rem;
}

.aboutMe_summary {
      padding: 1rem 7rem;

}

.aboutMe_summary>p {
      font-size: 40vw;
      font-weight: 800;
      font-stretch: 250%;
      font-family: var(--head-main);
      padding: 1rem 0;
      white-space: nowrap;
      text-transform: uppercase;
      line-height: 500px;

}

.text {
      color: var(--beige);
      font-size: 10vw;
      padding: 1rem 7rem;
      font-family: var(--head-main);
      font-weight: 800;
      font-stretch: 250%;
      background: #063977;
}

.line {
      position: relative;
}

.line-mask {
      position: absolute;
      top: 0;
      right: 0;
      background: #063977;
      opacity: 0.45;
      width: 100%;
      height: 100%;
      z-index: 2;
}

/* ----------->> SKILL <<------------- */

.skills {
      width: 100%;
      height: 700px;
      padding: 1rem 5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      opacity: 1;
      scale: 1;
      margin: auto;
      /* background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1500' height='700' preserveAspectRatio='none' viewBox='0 0 1500 700'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1043%26quot%3b)' fill='none'%3e%3crect width='1500' height='700' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1044%26quot%3b)'%3e%3c/rect%3e%3cpath d='M5 700L705 0L958.5 0L258.5 700z' fill='url(%26quot%3b%23SvgjsLinearGradient1045%26quot%3b)'%3e%3c/path%3e%3cpath d='M555 700L1255 0L1966 0L1266 700z' fill='url(%26quot%3b%23SvgjsLinearGradient1045%26quot%3b)'%3e%3c/path%3e%3cpath d='M1424 700L724 0L265 0L965 700z' fill='url(%26quot%3b%23SvgjsLinearGradient1046%26quot%3b)'%3e%3c/path%3e%3cpath d='M972 700L272 0L-194.5 0L505.5 700z' fill='url(%26quot%3b%23SvgjsLinearGradient1046%26quot%3b)'%3e%3c/path%3e%3cpath d='M989.030123353946 700L1500 189.03012335394595L1500 700z' fill='url(%26quot%3b%23SvgjsLinearGradient1045%26quot%3b)'%3e%3c/path%3e%3cpath d='M0 700L510.96987664605405 700L 0 189.03012335394595z' fill='url(%26quot%3b%23SvgjsLinearGradient1046%26quot%3b)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1043'%3e%3crect width='1500' height='700' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='13.33%25' y1='-28.57%25' x2='86.67%25' y2='128.57%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1044'%3e%3cstop stop-color='%230e2a47' offset='0'%3e%3c/stop%3e%3cstop stop-color='%2300459e' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1045'%3e%3cstop stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1046'%3e%3cstop stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(15%2c 70%2c 185%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e") no-repeat center/cover; */
      background-color: #0000009f;
}

.sills_title h1 {
      font-size: 3.2rem;
      font-weight: 700;
      font-family: var(--p-font);
      color: var(--papaya-whip);
      letter-spacing: 0.03em;
}

.skill_icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
}

.skill_icons {
      display: flex;
      margin: auto;
      justify-content: space-between;
      align-items: center;
      gap: 2rem;

}

.skill_icon-list {
      width: 200px;
      height: 200px;
      margin: auto;
      padding: 0.2rem;
      scale: 1;
      opacity: 1;
}

.icon_list {
      width: 200px;
      height: 200px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      align-items: center;
      background: rgba(9, 17, 60, 0.686);
      /* border-radius: 10%; */
}

.icon_list img {
      width: 100px;
      height: 100px;
      object-fit: contain;
}

.icon_list p {
      width: 100%;
      height: 30px;
      font-size: 20px;
      line-height: 25px;
      text-align: center;
      letter-spacing: 0.02rem;
      text-transform: uppercase;
      color: var(--papaya-whip);
      font-family: var(--head-font);
}

/* Flip card  */
.flip-card {
      width: 220px;
      height: 250px;
      perspective: 1000px;
}

.flip-card-inner {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.5s;
}

.flip-card-front,
.flip-card-back {
      width: 100%;
      height: 100%;
      position: absolute;
      backface-visibility: hidden;
      border-radius: 20%;
}

.flip-card-back {
      background: rgba(9, 17, 60, 0.686);
      color: white;
      transform: rotateY(180deg);
      border-radius: 10%;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 0.8rem;
      justify-content: start;
      align-items: flex-start;
}

.flip-card-back h3 {
      font-size: 1.5rem;
      font-weight: 800;
      font-family: var(--head-font);
      color: var(--orange);
      word-wrap: break-word;
}

.flip-card-back p {
      font-size: 1rem;
      font-weight: 500;
      font-family: var(--head-font);
      color: var(--papaya-whip);
}


.flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
}

/* ---------------  PROJECT ------------ */
#project {
      width: 100%;
      margin: auto;
      padding: 1rem 6rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 1rem;
}

.project_title h1 {
      font-size: 3rem;
      line-height: 3.5rem;
      font-family: var(--head-main);
      letter-spacing: 0.05em;
      font-weight: 700;
      font-stretch: 250%;
      color: var(--papaya-whip);
      text-transform: uppercase;

}

.project_list_container ul {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      padding: 1rem;
}

.project_list {
      width: 95%;
      height: 90vh;
}

.project_list_details {
      width: 100%;
      height: 100%;
      display: flex;
      gap: 1rem;
      justify-content: space-around;
      align-items: center;

}

.list_details {
      width: 40%;
      height: 90%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 1rem;
}

.p_title h1 {
      font-size: 2rem;
      font-family: var(--head-font);
      font-weight: 700;
      color: var(--orange);
}

.project_details {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 1rem;
}

.project_description {
      font-size: 1.5rem;
      font-family: var(--p-font);
      color: var(--papaya-whip);
}

.project_links {
      padding: 1rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      gap: 2rem;
}

.project_links a {
      display: flex;
      justify-content: space-around;
      align-items: center;
      gap: 0.5rem;
      background: rgba(0, 0, 0, 0.5);
      border: 2px solid var(--papaya-whip);
      border-radius: 20px;
      padding: 0.4rem .8rem;
}



a>.icon {
      display: flex;
      justify-content: center;
      align-items: center;
}

a>.a_text {
      color: var(--papaya-whip);
      font-size: 1.5rem;
      line-height: 1.7rem;
      font-family: var(--p-font);
      font-weight: 500;
}

.project_links a:hover {
      background: transparent;
}

.project_img {
      width: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
}

.project_img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 1rem;
}

/* ---------------  Footer ------------ */

.footer {
      width: 100%;
      height: 400px;
      background-color: #000;
}

.footer_container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
}

.footer_title h1 {
      font-size: 2.5rem;
      line-height: 2.8rem;
      font-family: var(--head-main);
      font-weight: 900;
      font-stretch: 250%;
      letter-spacing: 0.03em;
      color: var(--cornsilk);
}

.footer_contact {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.7rem;
}

.footer_contact li>p {
      font-size: 1.3rem;
      line-height: 1.5rem;
      font-family: var(--p-font);
      font-weight: 500;
      color: var(--gray);
      cursor: pointer;
}

.footer_social {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
}

.footer_social h3 {
      font-size: 1.5rem;
      line-height: 1.8rem;
      font-family: var(--head-main);
      font-weight: 900;
      letter-spacing: 0.03em;
      font-stretch: 250%;
      color: var(--cornsilk);
}


.social_links ul {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
}

.socialLink_li a>img {
      width: 30px;
      height: 30px;
      object-fit: contain;
}

.copyright {
      color: #FFF;
      font-size: 1.3rem;
      line-height: 1.5rem;
      font-family: var(--p-font);
      font-weight: 500;
      text-align: center;
}