html,
body {
  height: 100%;
  margin: 0 auto;
  background: #000;
  font-family: 'Inter', sans-serif;
}

.html.header-button-1,
.html.header-button-2,
.html.header-social-icons {
  display: none;
}


.c-head {
  isolation: isolate;
  z-index: 5000;
  position: relative;
}

.c-menu__links {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}


.shop-casestudy__banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  isolation: isolate;
  padding-block: 0 !important;
}

.shop-casestudy__img {
  position: absolute;
  top: 380px;
  left: 42%;
  z-index: -1;
}


.shop-casestudy__img img {
  width: 46%;
}

.shop-casestudy__content {
  padding: 0;
  width: 100%;
  margin: 0 auto;
}

.shop-casestudy__heading {
  margin: 1rem 0 4rem;
}


.shop-casestudy__heading h4 {
  color: #010102;
  font-weight: 500;
  font-size: 56px;
  line-height: 70px;
  letter-spacing: -1px;
}

.shop-casestudy__heading p {
  color: #010102;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  max-width: 486px;
  margin-bottom: 8px;
}

.shop-casestudy__img--phone {
  width: 60%;
  position: absolute;
  top: 815px;
  left: 116px;
}

:is(.shop-casestudy__content) h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Sora', sans-serif !important;
  opacity: 1;
}

.row.banner-overlay {
  max-width: 100% !important;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  max-width: 100% !important;
  height: 100%;
  min-height: 100vh;
  background: linear-gradient(to top, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 55%) 19%, rgb(0 0 0 / 70%) 49%, rgb(0 0 0 / 90%) 68%, rgb(0 0 0 / 91%) 79%, rgb(0 0 0 / 90%) 100%);
}

p {
  font-family: 'Inter', sans-serif !important;
  font-style: normal;
  font-weight: 300;
}

/*.full-width .ubermenu-nav,*/
/*.container,*/
/*.row {*/
/*  max-width: 1280px !important;*/
/*}*/

.header,
.header-wrapper {
  display: initial;
}

.header-wrapper.stuck .header-main {
  background: #00000099;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.header-nav .menu-item a {
  font-size: 15px;
  color: #d49846;
}

.header-nav .menu-item a:hover {
  opacity: 0.6;
  color: #d49846;
}

.top-nav .col {
  padding: 0 15px !important;
}

.top-nav .col-inner pl {
  padding-bottom: 0 !important;
}

#main.dark {
  background-color: #000 !important;
}

.head-name {
  line-height: 72px;
  margin-bottom: 3.6rem;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 3.6rem;
  max-width: 58rem;
  position: relative;
  z-index: 52;
  /*background-image: linear-gradient(192deg, #fff7ed, #f8e1c3 33%, #fff);*/
  /*background-clip: text;*/
  /*-webkit-background-clip: text;*/
  /*text-fill-color: transparent;*/
  /*-webkit-text-fill-color: transparent;*/
}

/*.head-name::after {*/
/*  bottom: -24px;*/
/*  content: "";*/
/*  display: block;*/
/*  width: 100px;*/
/*  height: 2px;*/
/*  background: #d49846;*/
/*  position: absolute;*/
/*}*/

.head-description {
  left: 0;
  right: 0;
  animation-name: slide_down;
  animation-duration: 1s;
  margin-bottom: 40px;
  line-height: 32px;
  margin-top: 30px;
  font-size: 20px;
  max-width: 44rem;
  z-index: 45;
  color: #fff;
  opacity: .82;

}



.skills,
.portfolio {
  position: relative !important;
}

.portfolio-bg {
  position: absolute !important;
  top: -31px !important;
  left: 100px !important;
  z-index: -1 !important;
  opacity: 0.6 !important;
  width: 30% !important;
}

.skills-bg {
  position: absolute !important;
  top: 0 !important;
  left: 100px !important;
  z-index: -1 !important;
  opacity: 0.6 !important;
  width: 17% !important;
}

.skills-text,
.portfolio-text {
  position: relative !important;
}

.portfolio p::after {
  bottom: 8px !important;
  left: 252px !important;
  content: "" !important;
  display: block !important;
  width: 100px !important;
  height: 3px !important;
  background: #d49846 !important;
  position: absolute !important;
}

.skills-text::after {
  bottom: 8px !important;
  left: 152px !important;
  content: "";
  display: block !important;
  width: 100px !important;
  height: 3px !important;
  background: #d49846 !important;
  position: absolute !important;
}

.footer-wrapper {
  display: none;
}

.mn-resume {
  color: #d49846 !important;
}

.mn-hero {
  position: relative;
  align-items: flex-start !important;
}

.mn-backdrop {
  position: absolute;
  top: -450px;
  z-index: 1;
}

.port-banner {
  position: relative;
}

.port-banner>.col-inner {
  overflow: hidden;
  max-height: 500px;
}

.port-details {
  position: absolute;
  top: 31%;
  left: 3%;
}

.port-details h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  color: #211d1c;
  font-weight: 400;
  font-size: 1.9rem;
}

.port-details p {
  max-width: 285px;
  color: #221D1D;
  font-weight: 400;
  font-size: 1rem;
  line-height: 27px;

}

.port-details p::after {
  display: none !important;
  background: transparent !important;
}

.port-details .primary.is-link {
  color: #fff;
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
}

.port-details .primary.is-link {
  color: #fff;
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
}


.port-details .button.is-link:hover {
  color: #fff;
  opacity: .6;
}

.port-banner-image {
  position: absolute;
  top: 8%;
  right: -30%;

}

.port-banner-image.super-holder {
  position: absolute;
  top: -58%;
  right: -34%;

}

.portfolio-post {
  position: relative;
  overflow: hidden;
}

.portfolio-post>.col-inner {
  overflow: hidden;
}

.portfolio-post-background {}

.portfolio-post-image {
  position: absolute;
  top: 249px;
  left: 49px;
}

.portfolio-post-image.super {
  width: 90% !important;
  top: 68px;
  left: 103px;
}

.portfolio-post-image.certify {
  left: 75px;
}

.portfolio-post-image.kurobi {
  left: 87px;
}

.portfolio-post-image.fansol {
  top: 242px;
  left: 97px;
  width: 92% !important;
  z-index: 50;
}

.fansol-overlay {
  position: absolute;
  background: #00000070;
  width: 100% !important;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
}



.portfolio-post-text h3 {
  font-family: 'Sora', sans-serif;
  color: #fff;
  font-weight: 500;
  font-size: 1.9rem;
}

.portfolio-post-text p {
  max-width: 552px;
  color: #fff;
  font-weight: 400;
  font-size: 1rem;
  line-height: 27px;
}

.portfolio-post-text p:after {
  display: none !important;
}

.portfolio-post-text a {
  color: #fff;
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;

}

.portfolio-post-text.fansol {
  z-index: 600 !important;
  color: #fff;
}

.portfolio-post-text.fansol h3,
.portfolio-post-text.fansol p {
  z-index: 600;
  color: #fff;
}

.portfolio-post-text.sup h3 {
  font-size: 25px;
}

.portfolio-post .button span {
  color: #fff !important;
}

.portfolio-post-text a.btn {
  border-radius: 40px !important;
  padding: 2px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portfolio-post-text a.btn.case {
  width: 215px;
  background: #e0effb !important;
  opacity: .8;
}

.portfolio-post-text a.btn.kurobi {
  background: #ffecc2 !important;
  opacity: .8;
  color: #fff;
}

.portfolio-post-text a.btn.pepskru {
  background: #e0b673 !important;
  opacity: .4;
  color: #fff;
}

.portfolio-post-text a.btn.certify {
  background: #def1b5 !important;
  color: #4e5f29;
  opacity: .5;
}

.portfolio-post-text a.btn.super {
  width: initial;
  background: #b8cdf2 !important;
}


.portfolio-post-text a.btn.fansol {
  background: #10121b66 !important;
  color: #fff !important;
  backdrop-filter: blur(20px);
  opacity: .6 !important;
}

.portfolio-post-text a.btn.fansol span {
  color: #fff !important;
}

.portfolio-post-text a.fansol-alt span {
  color: #f0e7e7 !important;
  opacity: .8;
}

.super-app img {
  width: 79%;
}

.scroll-fade {
  opacity: 0;
  transform: translateY(100px);
  transition: all 500ms ease-in-out;
  will-change: transform;
}

.scroll-fade.in {
  opacity: 1;
  transform: translateY(0px);
}

.mn-hero-super .section-bg.bg-loaded {
  background-size: contain !important;
  background-position: center;
}

.cursor {
  width: 20px;
  height: 20px;
  border: 1px solid #d49846;
  border-radius: 50%;
  position: absolute;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  animation: cursorAnim 0.5s infinite alternate;
  pointer-events: none;
  z-index: 5000;
}

.cursor::after {
  content: "";
  width: 20px;
  height: 20px;
  position: fixed;
  border: 8px solid #d49846;
  border-radius: 50%;
  opacity: 0.5;
  top: -1px;
  left: -1px;
  transform: translate(-50%, -50%);
  animation: cursorAnim2 0.5s infinite alternate;
}

@keyframes cursorAnim {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.7);
  }
}

@keyframes cursorAnim2 {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.4);
  }
}

@keyframes cursorAnim3 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(3);
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.expand {
  animation: cursorAnim3 0.5s forwards;
  border: 1px solid red;
}

.fancy-text {
  background: linear-gradient(135deg, #ec0877 32.5%, #f93044 45%, #f75735 60%, #fe880e 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.035em !important;
}

::selection {
  background-color: #d49846;
  color: #fff;
}

.overview-list-row ul {
  list-style: none;
}

.overview-list-row ul li {
  color: #ffffffcf;
  margin-left: 0;
}

.hi-welcome {
  font-size: 35px;
  margin-right: 1.4rem;
  background: #d4974514;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.hi-welcome .wave {
  animation-name: wave-animation;
  animation-duration: 2.5s;
  animation-iteration-count: 2;
  transform-origin: 70% 70%;
  display: inline-block;
}

.bright-lights {
  background-image: linear-gradient(271deg, #ff8a8a 30%, #a162e8 50%, #f093b0 70%, #edca85 94%);
  width: fit-content;
  color: rgb(98, 124, 226) !important;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.c-hero>.section-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: -webkit-fill-available;
    height: -moz-fill-available;
    height: fill-available;
}

.c-hero__meta{
    padding-bottom:0;
}

.c-hero__meta h6 {
    font-size: 12px;
}

.c-hero__meta p {
    font-size: 14px;
}

.c-hero__meta--last{
  margin-left:auto;
}

.c-hero__meta--last > *{
  text-align:right;
}

.c-hero__meta--first h6 {
    font-size: 12px;
}

.c-hero__meta--first p {
    font-size: 12px;
    font-weight: 500;
}



@keyframes wave-animation {
  0% {
    transform: rotate(0.0deg)
  }

  10% {
    transform: rotate(-10.0deg)
  }

  20% {
    transform: rotate(12.0deg)
  }

  30% {
    transform: rotate(-10.0deg)
  }

  40% {
    transform: rotate(9.0deg)
  }

  50% {
    transform: rotate(0.0deg)
  }

  100% {
    transform: rotate(0.0deg)
  }
}

@keyframes noise-anim {
  0% {
    clip: rect(25px, 9999px, 68px, 0);
  }

  5% {
    clip: rect(79px, 9999px, 51px, 0);
  }

  10% {
    clip: rect(93px, 9999px, 85px, 0);
  }

  15% {
    clip: rect(31px, 9999px, 41px, 0);
  }

  20% {
    clip: rect(74px, 9999px, 99px, 0);
  }

  25% {
    clip: rect(15px, 9999px, 10px, 0);
  }

  30% {
    clip: rect(71px, 9999px, 66px, 0);
  }

  35% {
    clip: rect(68px, 9999px, 87px, 0);
  }

  40% {
    clip: rect(85px, 9999px, 99px, 0);
  }

  45% {
    clip: rect(88px, 9999px, 74px, 0);
  }

  50% {
    clip: rect(62px, 9999px, 21px, 0);
  }

  55% {
    clip: rect(70px, 9999px, 57px, 0);
  }

  60% {
    clip: rect(81px, 9999px, 49px, 0);
  }

  65% {
    clip: rect(63px, 9999px, 27px, 0);
  }

  70% {
    clip: rect(16px, 9999px, 75px, 0);
  }

  75% {
    clip: rect(79px, 9999px, 83px, 0);
  }

  80% {
    clip: rect(96px, 9999px, 60px, 0);
  }

  85% {
    clip: rect(90px, 9999px, 70px, 0);
  }

  90% {
    clip: rect(34px, 9999px, 36px, 0);
  }

  95% {
    clip: rect(68px, 9999px, 50px, 0);
  }

  100% {
    clip: rect(48px, 9999px, 82px, 0);
  }
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(39px, 9999px, 33px, 0);
  }

  5% {
    clip: rect(60px, 9999px, 49px, 0);
  }

  10% {
    clip: rect(55px, 9999px, 61px, 0);
  }

  15% {
    clip: rect(1px, 9999px, 41px, 0);
  }

  20% {
    clip: rect(33px, 9999px, 77px, 0);
  }

  25% {
    clip: rect(45px, 9999px, 25px, 0);
  }

  30% {
    clip: rect(24px, 9999px, 87px, 0);
  }

  35% {
    clip: rect(54px, 9999px, 81px, 0);
  }

  40% {
    clip: rect(5px, 9999px, 30px, 0);
  }

  45% {
    clip: rect(30px, 9999px, 98px, 0);
  }

  50% {
    clip: rect(87px, 9999px, 85px, 0);
  }

  55% {
    clip: rect(71px, 9999px, 30px, 0);
  }

  60% {
    clip: rect(9px, 9999px, 91px, 0);
  }

  65% {
    clip: rect(50px, 9999px, 68px, 0);
  }

  70% {
    clip: rect(87px, 9999px, 84px, 0);
  }

  75% {
    clip: rect(52px, 9999px, 74px, 0);
  }

  80% {
    clip: rect(78px, 9999px, 17px, 0);
  }

  85% {
    clip: rect(51px, 9999px, 23px, 0);
  }

  90% {
    clip: rect(98px, 9999px, 70px, 0);
  }

  95% {
    clip: rect(67px, 9999px, 87px, 0);
  }

  100% {
    clip: rect(79px, 9999px, 54px, 0);
  }
}

@media only screen and (max-width: 720px) {

  .html.header-button-1,
  .html.header-button-2,
  .html.header-social-icons {
    display: none;
  }

  .mn-resume.mobile {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    font-size: 0.9rem;
  }

  .mn-hero {
    margin-top: .2rem;
    min-height: auto !important;
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
  }

  .mn-resume {
    font-size: 0.7rem;
  }

  /*#main.dark {*/
  /*  padding: 0rem 10px 0rem;*/
  /*}*/

  .skills-bg,
  .portfolio-bg {
    top: -13px !important;
    left: 4px !important;
    width: 46% !important;
  }

  .head-description {
    margin-bottom: 20px;
    line-height: 24px;
    font-size: 17px;
    max-width: 43rem;
  }

  .head-name {
    line-height: 34px;
    margin-bottom: 3.2rem;
    font-size: 25px;
  }

  .portfolio-post-text {
    position: absolute;
    top: 12px;
    left: -5px;
    padding-right: 2px;

  }

  .mn-logo {
    width: 100% !important;
  }

  .portfolio-post-text h3 {
    font-size: 16px;
  }

  .portfolio-post-text p {
    font-size: 12px;
    line-height: 16px;
    padding-right: 2px;
    margin-bottom: 4px;
  }

  .portfolio-post-text.sup h3 {
    font-size: 16px;
  }

  .portfolio-post-text a {
    font-size: 9px;
    margin-block: 0.8rem 0.4rem;
  }

  .portfolio-post-image {
    position: absolute;
    top: 139px;
    left: 67px;
  }


  .portfolio-post-image img {
    width: 60%;
  }

  .portfolio-post-image img {
    clip-path: initial;
  }

  .c-menu__links {
    justify-content: center;
  }

  .shop-casestudy__banner {
    min-height: 25vh !important;
  }

  .shop-casestudy__content {
    padding: 15px;
  }

  .shop-casestudy__img img {
    width: 66%;
  }

  .portfolio-post-text a.btn.case {
    width: 40%;
    white-space: nowrap;
  }


  .portfolio-post .img .img-inner {
    overflow: initial;
    position: relative;

  }

  /*.portfolio-post-td .portfolio-post-image img, .portfolio-post-kurobi .portfolio-post-image img, .portfolio-post.fansol .portfolio-post-image img, .portfolio-post-supershop .portfolio-post-image img, .portfolio-post-certify .portfolio-post-image img, .portfolio-post-pepskru .portfolio-post-image img {*/
  /*position: absolute;*/
  /*width: 78%;*/
  /*clip-path: inset(-15px 9% -1.98% -15% round 8px);*/

  /*}*/

  :is(.portfolio-post-td, .portfolio-post-kurobi, .portfolio-post.fansol, .portfolio-post-supershop, .portfolio-post-certify, .portfolio-post-pepskru) .portfolio-post-image img {
    position: absolute;
    width: 100%;
    clip-path: inset(-15px 9% -1.98% -15% round 8px);

  }

  .portfolio-post-td .portfolio-post-image img {
    left: -18px;
    top: 9px;

  }

  .portfolio-post-kurobi .portfolio-post-image img {
    left: -33px;
    top: 9px;

  }

  .portfolio-post.fansol .portfolio-post-image img {
    left: -41px;
    top: -98px;

  }

  .portfolio-post-supershop .portfolio-post-image img {
    left: -21px;
    top: 3px;
    width: 93% !important;
  }

  .portfolio-post-certify .portfolio-post-image img {
    left: -25px;
    top: 7px;
  }

  .portfolio-post-pepskru .portfolio-post-image img {
    left: -37px;
    top: 8px;
  }


  .geist- {
    font-family: "Geist", sans-serif;
    font-optical-sizing: auto;
    font-weight: ;
    font-style: normal;
  }


  .geist-mono- {
    font-family: "Geist Mono", monospace;
    font-optical-sizing: auto;
    font-weight: ;
    font-style: normal;
  }


  @media only screen and (min-width: 1200px) {
    .glitch {
      /*position: relative;*/
      margin: 0 auto;
      width: 500px;
      color: #fff;
      /*display: contents;*/
    }

    .glitch:after {
      content: attr(data-text);
      position: absolute;
      left: 2px;
      text-shadow: -1px 0 red;
      top: -29px;
      background: black;
      overflow: hidden;
      clip: rect(0, 870px, 0, 0);
      animation: noise-anim 2s 4.2s linear alternate-reverse;
    }

    .glitch:before {
      content: attr(data-text);
      position: absolute;
      left: -2px;
      text-shadow: 1px 0 blue;
      top: 0;
      background: black;
      overflow: hidden;
      clip: rect(0, 900px, 0, 0);
      animation: noise-anim-2 2s 4.2s linear alternate-reverse;
    }

    .shop-casestudy__content {
      padding: 0;
      width: 100%;
      margin: 0 auto;
    }


  }