@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@100;200;300;400;500;700;800;900&display=swap');
:root {
--c1: #fff;
    --c2: #c71340;
    --c3: #0a0c0f;
    --c4: #0e1115;
  }

  * {
    scroll-behavior:smooth;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    transition: all 0.3s ease;
  }

  body {
    background-color: var(--c3);
    font-family: "Poppins", sans-serif;
  }

  .main {
    height: 100vh;
    width: 100%;
  }

  .logo-wrapper {
    margin-top: 2.77777777778%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .main-page-logo {
    width: 80px;
    height: 73.253px;
    flex-shrink: 0;
  }

  /* .patern{
  } */

  .background-wrapper {
    width: 768.026px;
    height: 703.253px;
    flex-shrink: 0;
    fill: var(--c3);
  }
  .title {
    position: absolute;
    top: 30%;
    left: 10%;
  }
  .titleUstTaraf {
    font-size: 40px;
    color: var(--c1);
  }
  .titleUstTaraf span {
    color: var(--c2);
  }
  .titleAltTaraf {
    font-size: 48px;
    color: var(--c1);
    position: relative;
  }
  .titleAltTaraf span {
    /* font-weight: 300; */
  }
  .titleAltinAlti a{
    all: unset;
  }
  .titleAltinAlti {
    position: absolute;
    color: var(--c1);
    /* font-weight: 100; */
    font-size: 26px;
    left: 15px;
    display: flex;
    align-items: center;
    z-index: 2;
    cursor: pointer;
  }
  .titleAltinAlti::before {
    position: absolute;
    content: "";
    height: 90%;
    /* top: 50%; */
    width: 4px;
    left: -9px;
    background-color: var(--c2);
    transition: all 0.3s ease;
    z-index: -1;
  }
  .titleAltinAlti:hover::before {
    width: 110%;
  }
  .languages {
    position: absolute;
    color: var(--c1);
    font-size: 24px;

    top: 60%;
    left: 12%;

    display: flex;
    align-items: center;
  }
  .languages::before {
    position: absolute;
    content: "";
    width: 4px;
    height: 110%;
    left: -20px;
    background-color: var(--c2);
  }
  .languages span {
    font-weight: 600;
  }
  .aboutMe {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 10%;
    top: 30%;
    width: 585px;
    /* width: fit-content; */
    color: var(--c1);
  }
  .about {
    font-size: 24px;
    position: relative;
  }
  .about::before {
    position: absolute;
    content: "About Me";
    top: -55px;
    left: 0;
    font-size: 38px;
    font-weight: 500;
  }
  .aboutButton {
    color: rgb(255, 255, 255);
    text-decoration: none;
    position: absolute;
    content: "Download CV";
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: -90px;
    right: 0;
    font-size: 28px;
    background-color: var(--c4);
    border: 3px solid var(--c2);
    padding: 5px;
    width: 246px;
    border-radius: 10px;
    z-index: 2;
  }
  .aboutButton:hover {
    cursor: pointer;
    /* color: var(--c3); */
    background-color: var(--c2);
  }
  .intrests {
    color: var(--c1);
    font-size: 38px;
    position: absolute;
    top: 60%;
    right: 10%;
    z-index: 1;
  }
  .interests2 {
    color: var(--c1);
    font-weight: 400;
    padding-bottom: 10px;
  }

  .hide {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s, transform 0.5s;
  }

  .hide2 {
    opacity: 0;
    transition: opacity 0.5s, display 0.5s;
  }

  /* Define the animation when the element becomes visible */
  .hide.show {
      opacity: 1;
      transform: translateY(0);
  }
  /* Define the animation when the element becomes visible */
  .hide2.show {
      opacity: 1;
      transform: translateY(0);
  }


  .skills {
    height: 100vh;
    width: 100%;
    color: var(--c1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .skills h1 {
    font-weight: 600;
    font-size: 64px;
  }
  .skillsWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 45px;
    font-size: 28px;
  }
  .skill {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .skill p {
    margin-right: 50px;
  }
  .skill {
    margin: 50px;
  }
  .workedwithWrapepr{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: var(--c4);
      padding: 30px;
      border-radius: 10px;
      width: 70%;
  }
  .companyLink{
      all: unset;
      margin-right: 20px;
      text-decoration: none;
    }
    .companyLink:hover{
      cursor: pointer;
    }
    .services {
    height: 100vh;
    width: 100%;
    color: var(--c1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
  }
  .services h1 {
    font-weight: 600;
    font-size: 64px;
  }
  .servicesWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
    width: 100%;
  }
  .theServices {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .ustService {
    width: 95%;
    display: flex;
    justify-content: center;
  }
  .ultService {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
  }
  .leftSideServices {
    width: 45%;
  }
  .rightSideServices {
    width: 45%;
  }
  .service {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    height: 100px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: var(--c4);
    font-size: 30px;
    position: relative;
  }
  .service h1 {
    position: absolute;
    top: 25px;
    font-size: 30px;
  }
  .service svg {
    position: absolute;
    top: 40px;
    right: 10%;
  }
  .service:hover {
    cursor: pointer;
  }
  .infoService {
    width: 90%;
    position: absolute;
    bottom: 25px;
    /* left: 0; */
    font-size: medium;
    z-index: -1;
  }
  .patternXs {
    height: 35vh;
  }
  

  .infoAccount {
    width: 90%;
    position: absolute;
    bottom: 25px;
    font-size: medium;
    z-index: -1;
  }

  .contact{
      width: 100%;
      height: 40vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: var(--c1);
  }
  .contact h1{
      font-size: 64px;
      font-weight: 500;
  }
  .contactingAria{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      /* flex-direction: row; */
  }
  .iconWrapper{
      all: unset;
      text-decoration: none;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .iconWrapper a{
      all: unset;
      font-size: 35px;
      /* width: fit-content; */
      width: 50px;
      height: 50px;
      padding: 5px;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50px;

  }
  .iconWrapper a:hover{
      background-color: var(--c1);
      color: var(--c3);
      cursor: pointer;
  }
  .iconWrapper p{
      all: unset;
      color: var(--c1);
      display: flex;
      flex-direction: row;
      position: absolute;
      bottom: 0;
      width: fit-content;
      
  } 
  .iconWrapper p a{
      all: unset;
      transition: background-color 0.5s;
      padding: 5px;
      border: 4px solid var(--c2);
      border-radius: 10px;
  }
  .iconWrapper p a:hover{
    cursor: pointer;
    background-color: var(--c2);
    color: var(--c1);
  }