@font-face {
    font-family: "obviusly_regular";
    src: url("obviously-font-family-1705365682-0/Obviously-Semibold.otf");
    font-weight: normal;
    font-style: normal;
  }


  @font-face {
    font-family: "obviusly_wide";
    src: url("obviously-font-family-1705365682-0/ObviouslyWide-Bold.otf");
    font-weight: normal;
    font-style: normal;
  }
  

#obviously-normal{
    font-family: "obviusly_regular", sans-serif;
    color: #5F45F2;
    text-align: center;
  
  }

  #obviously-normal_lite{
    font-family: "obviusly_regular", sans-serif;
    color: #5F45F2;
  
    font-size: 5w;
  
  }




  .custom-padding {
    padding-top: 8%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 2%;
  }

 

  .custom-padding2 {
    padding-top: 2%;
    padding-left: 10%;
    padding-right: 10%;
  }

  .custom-padding3 {
    padding-top: 6%;
    padding-left: 10%;
    padding-right: 10%;
  }

  .custom-padding4 {
    padding-top: 10%;
    padding-left: 10%;
    padding-right: 10%;
  }

  .custom-padding5 {
    padding-top: 15%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 15%;
  }
  .custom-padding6 {
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;
  }
  .custom-padding_wrapper {
    padding-top: 5%;
 
    padding-bottom: 5%;
  }


.header-items{
    font-size: 5vw;
}

.header-items-phrase{
    font-size: 2vw;
}
.custom-padding-marquee {
  padding-top: 5%;
  padding-bottom: 5%;
 
}
.work_frame{
    width: 100vw;
    height: 100%;
}

@media (max-width: 768px) {
    .header-items-phrase {
        font-size: 5vw;
    }

    .header-items{
        font-size: 10vw;
    }

    #rotate5 {
      transform: rotate(0deg);
  }

  #rotate-5 {
    transform: rotate(0deg);
}

    .rotate-5{
      width: 70%;
      rotate: 5;
    }

    .my_works{
      width: 10%;
      height: auto;
    }
}



.muse_hover{
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.muse_hover:hover {
  transform: scale(1.2); /* Hover durumunda 1.1 kat büyüt */
}


.work_js{
  width: 100%;
  height: auto;
}






























.marquee {
  
  display: flex;
 
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}
.marquee-content {
  
  max-width: 100%; /* Div'in maksimum genişliğini sınırlar */
  display: flex;
	flex-shrink: 0;
  min-width: 100%;
  justify-content: space-around;
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
}
.text {
  font-size: 6vw;
  color: #5F45F2;
}
body {
  overflow-x: hidden;
  
}