body {
   padding-top: 60px;
   overflow-y: hidden;
   padding: 0;
   margin: 0;
   cursor: url(../images/space\ cursor.png), auto;
 }
 .popup-start {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup-start-content {
  background-color: white;
  padding: 20px 30px;
  border-radius: 10px;
  text-align: center;
  max-width: 30%; /* Adjust width as needed */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
}

.popup-start-icon {
  width: 50%;
  height: auto;
  margin-bottom: 15px;
}
.popup-start h2 {
  font-size: 30px;
  margin-bottom: 10px;
}
.popup-start p {
  font-size: 20px;
  margin-bottom: 20px;
  color: #555;
}

.popup-success {
  color: green;
}

.popup-error {
  color: red;
}
.popup-button-start {
  width: 30%;
  background-color: black;
  color: white;
  border: none;
  padding: 5px 10px;
  font-size: 15px;
  cursor: pointer;
  border-radius: 25px;
}


.popup-start-button:hover {
  background-color: #333;
}

.hidden {
  display: none;
}
@media (max-width: 767px) {
  .popup-start-content {
    background-color: white;
    padding: 20px 30px;
    border-radius: 10px;
    text-align: center;
    max-width: 80%; /* Adjust width as needed */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
  }
  .popup-start h2 {
    font-size: 35px;
    margin-bottom: 10px;
  }
  .popup-start p {
    font-size: 25px;
    margin-bottom: 20px;
    color: #555;
  }
  .popup-button-start {
    width: 50%;
    background-color: black;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 25px;
  }
}

 .container {
   display: flex;
   background-color: white;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 90%;
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 1000;
 }

 .loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: white;
   z-index: 9999;
   cursor: none;
   /* Hide mouse pointer */
 }

 .loading-slider {
   position: relative;
   border-radius: 100%;
   width: 50%;
   height: 5px;
   background: #a8a8a8;
   overflow: hidden;
   margin-top: 5%;
 }

 .progress {
   position: absolute;
   height: 100%;
   width: 0;
   background: #000000;
   animation: loading 5s linear infinite;
 }

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

   100% {
     width: 100%;
   }
 }

 #mainContent,
 header {
   opacity: 0;
   transition: opacity 0.5s ease;
 }

 #mainContent.show,
 header.show {
   opacity: 1;
 }

 main {
   position: relative;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 0;
 }

 .logo {
   width: 100%;
   max-width: 400px;
   height: auto;
   margin: 0 auto;
   display: block;
 }

 #signature {
   stroke-dasharray: 2080;
   stroke-dashoffset: 2080;
   animation: sign 3s ease-in-out infinite;
 }

 .noselect {
   -webkit-touch-callout: none;

   -webkit-user-select: none;

   -khtml-user-select: none;

   -moz-user-select: none;

   -ms-user-select: none;

   user-select: none;

 }

 @media (max-width: 1199px) {
   .logo {
     width: 70%;
   }

   .loading-slider {
     height: 4px;
   }
 }

 @media (max-width: 767px) {
   .logo {
     width: 50%;
   }

   .loading-slider {
     height: 3px;
   }
 }

 @keyframes sign {
   to {
     stroke-dashoffset: 0
   }
 }

 @keyframes fadeInAnimation {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }

 @keyframes anim-lineUp {
   0% {
     opacity: 0;
     transform: translateY(80%);
   }

   20% {
     opacity: 0;
   }

   50% {
     opacity: 1;
     transform: translateY(0%);
   }

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


 .u-section-1 {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
   overflow: hidden;
   background-color: #ffffff;
   z-index: 0;
 }


 .u-section-1 .u-container-layout-1 {
   top: 5%;
   position: relative;
   background-color: #ffffff00;
   text-align: center;
   z-index: 1;
   pointer-events: none;

 }

 #particles-js {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;


 }

 .u-section-1 .u-text-1 {
   font-family: "Cinzel", serif;
   background-image: none;
   margin: 0 auto;
   font-size: 10rem;
   letter-spacing: .05em;
 }

 .u-section-1 .u-text-2 {
   font-family: "monserat", serif;
   margin: 0 auto 0;
   padding-top: 20px;
   z-index: 5;
 }

 .u-section-1 .wrap {
   animation: blinkTextCursor 500ms steps(44) infinite normal;
 }

 .u-section-1 .scrollbutton {
   position: relative;
   text-align: center;
   margin: auto auto 0 auto;
   z-index: 2;
   display: inline-block;
   -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
   color: #000000;
   font: normal 400 20px/1 'Josefin Sans', sans-serif;
   letter-spacing: .1em;
   text-decoration: none;
   transition: opacity .3s;
 }

 .u-section-1 .scrollbutton:hover {
   opacity: .5;

 }

 #home .scrollbutton {
   pointer-events: initial;
   padding-top: 80px;
 }

 #home .scrollbutton span {
   position: absolute;
   top: 0;
   left: 50%;
   width: 24px;
   height: 24px;
   margin-left: -12px;
   border-left: 2px solid #000000;
   border-bottom: 2px solid #000000;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-animation: sdb07 2s infinite;
   animation: sdb07 2s infinite;
   opacity: 0;
   box-sizing: border-box;
 }

 #home .scrollbutton span:nth-of-type(1) {
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
 }

 #home .scrollbutton span:nth-of-type(2) {
   top: 16px;
   -webkit-animation-delay: .15s;
   animation-delay: .15s;
 }

 #home .scrollbutton span:nth-of-type(3) {
   top: 32px;
   -webkit-animation-delay: .3s;
   animation-delay: .3s;
 }

 @-webkit-keyframes sdb07 {
   0% {
     opacity: 0;
   }

   50% {
     opacity: 1;
   }

   100% {
     opacity: 0;
   }
 }

 @keyframes sdb07 {
   0% {
     opacity: 0;
   }

   50% {
     opacity: 1;
   }

   100% {
     opacity: 0;
   }
 }

 @keyframes blinkTextCursor {
   from {
     border-right-color: #1d6d86;
   }

   to {
     border-right-color: transparent;
   }
 }

 @media (max-width: 1199px) {
   .u-section-1 {
     background-position: 50% 50%;
     min-height: 100vh;
   }

   .u-section-1 .u-group-1 {
     height: auto;
   }

   .u-section-1 .u-text-1 {
     font-weight: 500;
     font-size: 5rem;
   }

   .u-section-1 .u-text-2 {
     font-size: 2rem;
   }
 }

 @media (min-width:991px) and (max-width: 1199px) and (orientation: landscape) {
   .u-section-1 .u-text-1 {
     font-weight: 500;
     font-size: 5rem;
   }

   .u-section-1 .u-text-2 {
     font-size: 2rem;
   }
 }

 @media (max-width: 991px) {
   .u-section-1 {
     min-height: 100vh;
   }

   .u-section-1 .u-text-1 {
     font-weight: 500;
     font-size: 5rem;
   }

   .u-section-1 .u-text-2 {
     font-size: 2rem;
   }

   .u-section-1 .scrollbutton {
     margin: auto auto -5% auto;
   }
 }

 @media (max-width: 767px) {
   .u-section-1 .u-container-layout-1 {
     top: 0%;
   }

   .u-section-1 {
     min-height: 100vh;
   }

   .u-section-1 .u-text-1 {
     font-weight: 500;
     font-size: 4rem;
   }
 }

 @media (max-width: 575px) {
   .u-section-1 .u-container-layout-1 {
     top: 0%;
   }

   .u-section-1 {
     min-height: 100vh;
   }

   .u-section-1 .u-text-2 {
     margin-top: 19px;
   }
 }

 .u-section-2 {

   min-height: 100vh;
   position: relative;
   z-index: 0;
 }

 .u-section-2 .u-layout-wrap-1 {
   height: 100%;
   width: 100%;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.226) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.226) 100%);
   margin-top: 0;
   margin-bottom: 0;
   z-index: 5;
 }

 .u-section-2 .u-layout-cell-1 {
   min-height: 100%;
 }

 .u-section-2 .u-container-layout-1 {
   padding: 10% !important;
 }

 .u-section-2 .u-group-elements-1 {
   width: 314px;
   height: auto;
   min-height: 48px;
   margin: 76px auto 0 0;
 }

 .u-section-2 .u-text-1 {
   margin: 0 0 0 7px;
   font-family: "Caveat", cursive;
   font-weight: 400;
 }

 .u-section-2 .u-shape-1 {
   width: 66px;
   height: 25px;
   margin: -20px auto 0 0;
 }

 .u-section-2 .u-text-2 {
   font-family: "ubuntu";
   font-size: 1.4rem;
   margin: 76px auto 0 0;
   font-weight: 400;
 }

 .u-section-2 .u-text-2 .u-special {
   display: contents;
   color: #1d6d86;
   font-weight: bold;
 }

 .u-section-2 .u-btn-1 {

   font-size: 1.125rem;
   font-weight: 700;
   margin: 95px auto 0;
   padding: 2px 0 3px;
 }

 .u-section-2 .u-icon-1 {
   font-size: 3.3334em;
   margin-left: 10px;
 }

 .u-section-2 .u-layout-cell-2 {
   min-height: 1009px;
   justify-content: center;
   align-content: center;
 }

 .u-section-2 .u-container-layout-2 {
   padding: 0;
 }

 .u-section-2 .btn-animate {
   margin-left: auto;
   margin-right: auto;

   align-items: center;
   justify-content: flex-start;

   position: relative;
   overflow: hidden;
   transition: all 0.5s ease;
 }

 .u-section-2 .btn-animate .u-file-icon {
   display: inline-block;
   margin-right: 8px;

   transition: all 0.5s ease;
 }

 .u-section-2 .btn-animate .btn-text {
   transition: opacity 0.4s ease;
 }

 .u-section-2 .btn-animate:hover .btn-text {
   opacity: 0;

 }

 .u-section-2 .btn-animate:hover {
   justify-content: center;

 }

 .u-section-2 .u-icon-1 {
   transform: translateX(0);

   transition: all 0.8s ease;
 }

 .u-section-2 .btn-animate:hover .u-icon-1 {
   transform: translateX(-100px);

 }

 .tagcloud {

   pointer-events: none;
   position: absolute;
   margin: 0 auto;
   display: inline-block;
   top: 20%;
   letter-spacing: 1px;
   font-family: "ubuntu", monospace;
   font-size: 16px;
   z-index: 2;
 }

 .logo-img {
   filter: grayscale(100%);
   transition: filter 2s ease-in-out;
 }

 .Sphere span {
   transition: filter 3s ease-in-out, opacity 3s ease-in-out;
 }

 .Sphere span[style*="z-index: 1"] .logo-img {
   filter: grayscale(0%);
 }

 .Sphere span[style*="z-index: -1"] {
   filter: blur(4px);
   opacity: 0.3;
 }

 .Sphere span[style*="z-index: -1"] .logo-img {
   filter: grayscale(100%);
 }



 #scroll-wrapper {
   position: relative;
   left: 10%;
   bottom: 10%;
   display: table;
   width: 100%;
   height: 100%;
 }

 #scroll-wrapper-inner {
   display: table-cell;
   vertical-align: bottom;
   width: 100%;
   height: 100%;
 }

 #scroll-down {
   display: block;
   position: relative;
   padding-top: 79px;
   text-align: center;
 }

 #scroll-title {
   display: block;
   text-transform: uppercase;
   color: black;
   font-family: "Spectral", serif;
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 0.4em;
   text-align: center;
   transform: rotate(90deg);
   margin-bottom: 45px;
 }

 #scroll-down::before {
   -webkit-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
   -moz-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
   -o-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
   animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;


   position: absolute;
   top: 0px;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 90px;
   background: black;
   content: ' ';
 }

 @-webkit-keyframes elasticus {
   0% {
     -webkit-transform-origin: 0% 0%;
     -ms-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
     -o-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
     -webkit-transform: scale(1, 0);
     -ms-transform: scale(1, 0);
     -moz-transform: scale(1, 0);
     -o-transform: scale(1, 0);
     transform: scale(1, 0);
   }

   50% {
     -webkit-transform-origin: 0% 0%;
     -ms-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
     -o-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     transform: scale(1, 1);
   }

   50.1% {
     -webkit-transform-origin: 0% 100%;
     -ms-transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100%;
     transform-origin: 0% 100%;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     transform: scale(1, 1);
   }

   100% {
     -webkit-transform-origin: 0% 100%;
     -ms-transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100%;
     transform-origin: 0% 100%;
     -webkit-transform: scale(1, 0);
     -ms-transform: scale(1, 0);
     -moz-transform: scale(1, 0);
     -o-transform: scale(1, 0);
     transform: scale(1, 0);
   }
 }

 @-moz-keyframes elasticus {
   0% {
     -webkit-transform-origin: 0% 0%;
     -ms-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
     -o-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
     -webkit-transform: scale(1, 0);
     -ms-transform: scale(1, 0);
     -moz-transform: scale(1, 0);
     -o-transform: scale(1, 0);
     transform: scale(1, 0);
   }

   50% {
     -webkit-transform-origin: 0% 0%;
     -ms-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
     -o-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     transform: scale(1, 1);
   }

   50.1% {
     -webkit-transform-origin: 0% 100%;
     -ms-transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100%;
     transform-origin: 0% 100%;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     transform: scale(1, 1);
   }

   100% {
     -webkit-transform-origin: 0% 100%;
     -ms-transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100%;
     transform-origin: 0% 100%;
     -webkit-transform: scale(1, 0);
     -ms-transform: scale(1, 0);
     -moz-transform: scale(1, 0);
     -o-transform: scale(1, 0);
     transform: scale(1, 0);
   }
 }

 @-o-keyframes elasticus {
   0% {
     -webkit-transform-origin: 0% 0%;
     -ms-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
     -o-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
     -webkit-transform: scale(1, 0);
     -ms-transform: scale(1, 0);
     -moz-transform: scale(1, 0);
     -o-transform: scale(1, 0);
     transform: scale(1, 0);
   }

   50% {
     -webkit-transform-origin: 0% 0%;
     -ms-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
     -o-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     transform: scale(1, 1);
   }

   50.1% {
     -webkit-transform-origin: 0% 100%;
     -ms-transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100%;
     transform-origin: 0% 100%;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     transform: scale(1, 1);
   }

   100% {
     -webkit-transform-origin: 0% 100%;
     -ms-transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100%;
     transform-origin: 0% 100%;
     -webkit-transform: scale(1, 0);
     -ms-transform: scale(1, 0);
     -moz-transform: scale(1, 0);
     -o-transform: scale(1, 0);
     transform: scale(1, 0);
   }
 }

 @keyframes elasticus {
   0% {
     -webkit-transform-origin: 0% 0%;
     -ms-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
     -o-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
     -webkit-transform: scale(1, 0);
     -ms-transform: scale(1, 0);
     -moz-transform: scale(1, 0);
     -o-transform: scale(1, 0);
     transform: scale(1, 0);
   }

   50% {
     -webkit-transform-origin: 0% 0%;
     -ms-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
     -o-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     transform: scale(1, 1);
   }

   50.1% {
     -webkit-transform-origin: 0% 100%;
     -ms-transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100%;
     transform-origin: 0% 100%;
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     transform: scale(1, 1);
   }

   100% {
     -webkit-transform-origin: 0% 100%;
     -ms-transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100%;
     transform-origin: 0% 100%;
     -webkit-transform: scale(1, 0);
     -ms-transform: scale(1, 0);
     -moz-transform: scale(1, 0);
     -o-transform: scale(1, 0);
     transform: scale(1, 0);
   }
 }

 @media (max-width: 1199px) {
   .u-section-2 {
     min-height: 1008px;
   }

   .u-section-2 .u-layout-cell-1 {
     min-height: 953px;
   }

   .u-section-2 .u-container-layout-1 {
     padding-bottom: 0;
   }

   .u-section-2 .u-group-elements-1 {
     width: 250px;
     margin-right: 250px;
   }

   .u-section-2 .u-text-1 {
     margin-left: 8px;
   }

   .u-section-2 .u-text-2 {
     margin-top: 42px;
   }

   .u-section-2 .u-btn-1 {
     margin-top: 19px;
   }

   .u-section-2 .u-layout-cell-2 {
     min-height: 953px;
   }
 }

 @media (max-width: 991px) {
   .u-section-2 {
     min-height: 155px;
   }

   .u-section-2 .u-layout-cell-1 {
     min-height: 1082px;
   }

   .u-section-2 .u-group-elements-1 {
     width: 195px;
     margin-top: 37px;
     margin-right: auto;
   }

   .u-section-2 .u-text-1 {
     font-size: 2.5rem;
   }

   .u-section-2 .u-text-2 {
     width: auto;
     margin-top: 43px;
     margin-right: 0;
   }

   .u-section-2 .u-btn-1 {
     font-size: 1rem;
     margin-top: 49px;
   }

   .u-section-2 .u-layout-cell-2 {
     min-height: 700px;
   }

   .tagcloud {
     top: 30%;
   }
 }

 @media (max-width: 767px) {
   .u-section-2 {
     min-height: 1064px;
   }

   .u-section-2 .u-layout-cell-1 {
     min-height: 560px;
   }

   .u-section-2 .u-group-elements-1 {
     width: 189px;
     margin-right: 420px;
     margin-left: 11px;
   }

   .u-section-2 .u-text-1 {
     font-size: 2.5rem;
   }

   .u-section-2 .u-text-2 {
     font-size: 1.5rem;
     margin-top: 44px;
   }

   .u-section-2 .u-btn-1 {
     font-size: 0.875rem;
     margin-top: 51px;
   }

   .u-section-2 .u-layout-cell-2 {
     min-height: 650px;
   }

   .tagcloud {
     top: 0%;
   }


   .tagcloud .logo-img {
     width: 20px;
     height: 20px;

   }

 }

 @media (max-width: 575px) {
   .u-section-2 {
     min-height: 1073px;
   }

   .u-section-2 .u-layout-cell-1 {
     min-height: 599px;
   }

   .u-section-2 .u-group-elements-1 {
     width: 188px;
     margin-right: auto;
     margin-left: 0;
   }

   .u-section-2 .u-text-1 {
     font-size: 2.5rem;
   }

   .u-section-2 .u-text-2 {
     font-size: 1.2rem;
     margin-top: 25px;
   }

   .u-section-2 .u-btn-1 {
     margin-top: 32px;
   }

   .u-section-2 .u-layout-cell-2 {
     min-height: 602px;
   }

   .tagcloud {
     top: 0%;
   }

   .tagcloud .logo-img {
     width: 10px;
     height: 10px;

   }
 }

 .u-section-3 {
   min-height: 110vh;
   position: sticky;
   top: 0;
   z-index: 1;
   overflow: hidden;
   background-size: cover;
   background-attachment: fixed;

 }

 .u-section-3 .u-layout-wrap-1 {
   margin-top: 60px;
   margin-bottom: 60px;
 }

 .u-section-3 .u-layout-cell-1 {
   min-height: 804px;
 }

 .u-section-3 .u-container-layout-1 {
   padding: 30px;
 }

 .u-section-3 .u-text-1 {
   margin-bottom: 0;
   margin-top: 0;
 }

 .u-section-3 .u-layout-cell-2 {
   min-height: 804px;
 }

 .u-section-3 .u-container-layout-2 {
   padding: 30px;
 }

 @media (max-width: 1199px) {
   .u-section-3 {
     background-position: 50% 50%;
   }

   .u-section-3 .u-layout-cell-1 {
     min-height: 663px;
   }

   .u-section-3 .u-layout-cell-2 {
     min-height: 663px;
   }
 }

 @media (max-width: 991px) {
   .u-section-3 .u-layout-cell-1 {
     min-height: 100px;
   }

   .u-section-3 .u-layout-cell-2 {
     min-height: 508px;
   }
 }

 @media (max-width: 767px) {
   .u-section-3 .u-layout-wrap-1 {
     margin-top: 73px;
     margin-bottom: 0;
   }

   .u-section-3 .u-container-layout-1 {
     padding-left: 10px;
     padding-right: 10px;
   }

   .u-section-3 .u-layout-cell-2 {
     min-height: 762px;
   }

   .u-section-3 .u-container-layout-2 {
     padding-left: 10px;
     padding-right: 10px;
   }
 }

 @media (max-width: 575px) {
   .u-section-3 {
     min-height: 1025px;
   }

   .u-section-3 .u-layout-wrap-1 {
     margin-top: 45px;
     margin-bottom: 45px;
   }

   .u-section-3 .u-layout-cell-1 {
     min-height: 472px;
   }

   .u-section-3 .u-layout-cell-2 {
     min-height: 464px;
   }
 }

 .glass { 
   border-radius: 16px;
   background: rgba(0, 0, 0, 0.29);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5.8px);
   -webkit-backdrop-filter: blur(5.8px);
   border: 1px solid rgba(255, 255, 255, 0.3);
 }

 #projects {
   position: sticky;
   top: 0;
   z-index: 2;
   min-height: 120vh;
   overflow: hidden;
 }

 .work{
  height: 110vh;
  margin-top: -50px;
  width: 100vw;
  overflow: hidden;
  position: relative;
}
.work .list .item{
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
}
.work .list .item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work .list .item .content{
  position: absolute;
  top: 20%;
  min-width: 60%;
  left: 40%;
  padding: 30px;
  transform: translateX(-50%);
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 5px 10px #0004;
}
.work .list .item .author{
  font-weight: bold;
  letter-spacing: 10px;
}
.work .list .item .title,
.work .list .item .topic{
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.3em;
}
.work .list .item .des{
  font-size: 1.3rem;
}
.work .list .item .topic{
  color: #1d6d86;
}
.work .list .item .buttons{
  display: grid;
  grid-template-columns: repeat(2, 130px);
  grid-template-rows: 40px;
  gap: 5px;
  margin-top: 20px;
}
.work .list .item .buttons button{
  border: none;
  background-color: #eee;
  letter-spacing: 3px;
  font-family: Poppins;
  font-weight: 500;
}
.work .list .item .buttons button:nth-child(2){
  background-color: transparent;
  border: 1px solid #fff;
  color: #eee;
}
.thumbnail{
  position: absolute;
  bottom:10%;
  left: 50%;
  width: max-content;
  z-index: 100;
  display: flex;
  gap: 20px;
}
.thumbnail .item{
  width: 150px;
  height: 220px;
  flex-shrink: 0;
  position: relative;
}
.thumbnail .item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.thumbnail .item .content{
  color: #fff;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}
.thumbnail .item .content .title{
  font-weight: 500;
}
.thumbnail .item .content .des{
  font-weight: 300;
}
/* arrows */
.arrows{
  position: absolute;
  top: 80%;
  right: 52%;
  z-index: 100;
  width: 300px;
  max-width: 30%;
  display: flex;
  gap: 10px;
  align-items: center;
}
.arrows button{
  background: rgba(0, 0, 0, 0.29);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.8px);
  -webkit-backdrop-filter: blur(5.8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-family: monospace;
  font-weight: bold;
  transition: .5s;
}
.arrows button:hover{
  background-color: #fff;
  color: #000;
}

/* animation */
.work .list .item:nth-child(1){
  z-index: 1;
}

/* animation text in first item */

.work .list .item:nth-child(1) .content .author,
.work .list .item:nth-child(1) .content .title,
.work .list .item:nth-child(1) .content .topic,
.work .list .item:nth-child(1) .content .des,
.work .list .item:nth-child(1) .content .buttons
{
  transform: translateY(50px);
  filter: blur(20px);
  opacity: 0;
  animation: showContent .5s 1s linear 1 forwards;
}
@keyframes showContent{
  to{
      transform: translateY(0px);
      filter: blur(0px);
      opacity: 1;
  }
}
.work .list .item:nth-child(1) .content .title{
  animation-delay: 1.2s!important;
}
.work .list .item:nth-child(1) .content .topic{
  animation-delay: 1.4s!important;
}
.work .list .item:nth-child(1) .content .des{
  animation-delay: 1.6s!important;
}
.work .list .item:nth-child(1) .content .buttons{
  animation-delay: 1.8s!important;
}
/* create animation when next click */
.work.next .list .item:nth-child(1) img{
  width: 150px;
  height: 220px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  border-radius: 30px;
  animation: showImage .5s linear 1 forwards;
}
@keyframes showImage{
  to{
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 0;
  }
}

.work.next .thumbnail .item:nth-last-child(1){
  overflow: hidden;
  animation: showThumbnail .5s linear 1 forwards;
}
.work.prev .list .item img{
  z-index: 100;
}
@keyframes showThumbnail{
  from{
      width: 0;
      opacity: 0;
  }
}
.work.next .thumbnail{
  animation: effectNext .5s linear 1 forwards;
}

@keyframes effectNext{
  from{
      transform: translateX(150px);
  }
}

/* running time */

.work .time{
  position: absolute;
  z-index: 1000;
  width: 0%;
  height: 3px;
  left: 0;
  top: 0;
}

.work.next .time,
.work.prev .time{
  animation: runningTime 3s linear 1 forwards;
}
@keyframes runningTime{
  from{ width: 100%}
  to{width: 0}
}


/* prev click */

.work.prev .list .item:nth-child(2){
  z-index: 2;
}

.work.prev .list .item:nth-child(2) img{
  animation: outFrame 0.5s linear 1 forwards;
  position: absolute;
  bottom: 0;
  left: 0;
}
@keyframes outFrame{
  to{
      width: 150px;
      height: 220px;
      bottom: 50px;
      left: 50%;
      border-radius: 20px;
  }
}

.work.prev .thumbnail .item:nth-child(1){
  overflow: hidden;
  opacity: 0;
  animation: showThumbnail .5s linear 1 forwards;
}
.work.next .arrows button,
.work.prev .arrows button{
  pointer-events: none;
}
.work.prev .list .item:nth-child(2) .content .author,
.work.prev .list .item:nth-child(2) .content .title,
.work.prev .list .item:nth-child(2) .content .topic,
.work.prev .list .item:nth-child(2) .content .des,
.work.prev .list .item:nth-child(2) .content .buttons
{
  animation: contentOut 1.5s linear 1 forwards!important;
}

@keyframes contentOut{
  to{
      transform: translateY(-150px);
      filter: blur(20px);
      opacity: 0;
  }
}

 

 @media (min-width:991px) and (max-width: 1199px) and (orientation: landscape) {
   .work {
     min-height: 110vh;
   }

   .work .list .item .content {
     top: 25%;
     right: -35%;
     left: 50%;
     padding: 10px;
   }

   .work .list .item .topic {
     font-size: 1.7rem;
   }

   .work .list .item .des {
     font-size: 1rem;
     width: 100%;
   }

   .thumbnail {
    transition: none !important;
    animation: none !important;
     left: 100%;
     opacity: 0;

   }

   .thumbnail .item { 
     width: 100px;
     height: 170px;
     opacity: 0;
   }
   .arrows {
     top: 75%;
     left: 45%;
   }

   .arrows button {
     width: 38px;
     height: 40px;
   }
   .work.prev .list .item:nth-child(2) img {
    animation: none !important; 
  }

 }
@media (max-width: 991px) {
   .work {
     min-height: 110vh;
   }

   .work .list .item .content {
     top: 20%;
     right: -35%;
     left: 50%;
     padding: 10px;
   }

   .work .list .item .topic {
     font-size: 1.8rem;
   }

   .work .list .item .des {
     font-size: 1rem;
     width: 100%;
   }

   .thumbnail {
     left: 100%;
     opacity: 0;

   }

   .thumbnail .item {
     width: 100px;
     height: 170px;
   }

   .arrows {
     top: 75%;
     right: 42%;
   }

   .arrows button {
     width: 38px;
     height: 40px;
   }

 }
 @media (max-width: 767px) {
   .work {
     min-height: 110vh;
   }

   .work .list .item .content {
     top: 20%;
     right: -35%;
     left: 50%;
     padding: 10px;
   }

   .work .list .item .topic {
     font-size: 1.4em;
   }

   .work .list .item .des {
     font-size: 0.9rem;
     width: 100%;
   }

   .thumbnail {
     left: 100%;
     opacity: 0;

   }

   .thumbnail .item {
     width: 100px;
     height: 170px;
   }

   .arrows {
     top: 75%;
     right: 42%;
   }

   .arrows button {
     width: 38px;
     height: 40px;
   }

 } 

 @media (max-width: 575px) {
   .work {
     min-height: 100vh;
   }

   .work .list .item .content {
     top: 15%;
     right: -35%;
     left: 50%;
   }

   .work .list .item .topic {
     font-size: 1.5em;
   }

   .work .list .item .des {
     font-size: 1rem;
   }

   .arrows button {
     width: 38px;
     height: 40px;
   }

   .thumbnail {
     left: 50%;
     opacity: 1;
   }

   .thumbnail .item {
     width: 130px;
     height: 200px;
   }

   .arrows {
     top: 80%;
     right: 60%;
   }

   .arrows button {
     width: 38px;
     height: 40px;
   }

 }

 @keyframes showContent {
   to {
     transform: translateY(0px);
     filter: blur(0px);
     opacity: 1;
   }
 }

 .work .list .item:nth-child(1) .content {
   animation-delay: 1s !important;
 }

 .work .list .item:nth-child(1) .content .title {
   animation-delay: 1.2s !important;
 }

 .work .list .item:nth-child(1) .content .topic {
   animation-delay: 1.4s !important;
 }

 .work .list .item:nth-child(1) .content .des {
   animation-delay: 1.6s !important;
 }

 .work .list .item:nth-child(1) .content .buttons {
   animation-delay: 1.8s !important;
 }


 .work.next .list .item:nth-child(1) img {
   width: 150px;
   height: 220px;
   position: absolute;
   bottom: 50px;
   left: 50%;
   border-radius: 30px;
   animation: showImage .5s linear 1 forwards;
 }

 @keyframes showImage {
   to {
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 0;
   }
 }

 .work.next .thumbnail .item:nth-last-child(1) {
   overflow: hidden;
   animation: showThumbnail .5s linear 1 forwards;
 }

 .work.prev .list .item img {
   z-index: 100;
 }

 @keyframes showThumbnail {
   from {
     width: 0;
     opacity: 0;
   }
 }

 .work.next .thumbnail {
   animation: effectNext .5s linear 1 forwards;
 }

 @keyframes effectNext {
   from {
     transform: translateX(150px);
   }
 }


 .work .time {
   position: absolute;
   z-index: 1000;
   width: 0%;
   height: 3px;
   background-color: #f1683a;
   left: 0;
   top: 0;
 }

 .work.next .time,
 .work.prev .time {
   animation: runningTime 3s linear 1 forwards;
 }

 @keyframes runningTime {
   from {
     width: 100%
   }

   to {
     width: 0
   }
 }




 .work.prev .list .item:nth-child(2) {
   z-index: 2;
 }

 .work.prev .list .item:nth-child(2) img {
   animation: outFrame 0.5s linear 1 forwards;
   position: absolute;
   bottom: 0;
   left: 0;
 }

 @keyframes outFrame {
   to {
     width: 150px;
     height: 220px;
     bottom: 50px;
     left: 50%;
     border-radius: 20px;
   }
 }

 .work.prev .thumbnail .item:nth-child(1) {
   overflow: hidden;
   opacity: 0;
   animation: showThumbnail .5s linear 1 forwards;
 }

 .work.next .arrows button,
 .work.prev .arrows button {
   pointer-events: none;
 }

 .work.prev .list .item:nth-child(2) .content .author,
 .work.prev .list .item:nth-child(2) .content .title,
 .work.prev .list .item:nth-child(2) .content .topic,
 .work.prev .list .item:nth-child(2) .content .des,
 .work.prev .list .item:nth-child(2) .content .buttons {
   animation: contentOut 1.5s linear 1 forwards !important;
 }

 @keyframes contentOut {
   to {
     transform: translateY(-150px);
     filter: blur(20px);
     opacity: 0;
   }
 }

 @media screen and (max-width: 678px) {
   .work .list .item .content {
     padding-right: 0;
   }

   .work .list .item .content .title {
     font-size: 30px;
   }
 }

 .u-section-4 {
   position: relative;
   min-height: 110vh;
   background-image: linear-gradient(white, #d9d9d9);
   z-index: 4;
 }

 .u-section-4 .u-sheet-1 {
   min-height: 110vh;
 }

 .u-section-4 .u-group-1 {
   height: auto;
   width: 1140px;
   min-height: 562px;
   margin: 60px 0;
 }

 .u-section-4 .u-container-layout-1 {
   padding: 30px 250px;
 }

 .u-section-4 .u-text-1 {
   font-size: 2.9rem;
   margin: 0 auto;
   font-family: "Oswald", sans-serif;
 }

 #signature {
   stroke-dasharray: 2080;
   stroke-dashoffset: 2080;
   animation: sign 3s ease-in-out infinite;
 }

 .u-section-4 .u-text-2 {
   margin: 20px 0 0;
   font-family: "Quattrocento", serif;
 }

 .u-section-4 .u-form-1 {
   height: 331px;
   width: 520px;
   margin: 50px auto 0;
 }

 .u-section-4 .u-btn-1 {
   background-image: none;
   border-style: solid;
 }

 @media (max-width: 1199px) {
   .u-section-4 .u-group-1 {
     min-height: 702px;
     margin-right: initial;
     margin-left: initial;
     height: auto;
     width: auto;
   }

   .u-section-4 .u-text-1 {
     width: auto;
   }

   .u-section-4 .u-text-2 {
     margin-top: 80px;
   }

   .u-section-4 .u-form-1 {
     width: 440px;
   }

   .u-section-4 .u-btn-1 {
     --radius: 10px;
   }
 }

 @media (max-width: 991px) {
   .u-section-4 .u-container-layout-1 {
     padding-left: 30px;
     padding-right: 30px;
   }
 }

 @media (max-width: 767px) {
   .u-section-4 .u-text-1 {
     font-size: 2.2rem;
   }

   .u-section-4 .u-container-layout-1 {
     padding-left: 10px;
     padding-right: 10px;
   }
 }

 @media (max-width: 575px) {
   .u-section-4 .u-form-1 {
     width: 320px;
   }
 }

 @keyframes sign {
   to {
     stroke-dashoffset: 0
   }
 }

 @keyframes fadeInAnimation {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }

 @keyframes anim-lineUp {
   0% {
     opacity: 0;
     transform: translateY(80%);
   }

   20% {
     opacity: 0;
   }

   50% {
     opacity: 1;
     transform: translateY(0%);
   }

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

 #stars {
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 1;
 }

 .particles-js {
   position: sticky;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   height: 100%;
   z-index: -1;
   background-color: #ffffff;
   pointer-events: auto;
 }


 .go-btn {
   text-orientation: upright;
   writing-mode: vertical-rl;
 }

 #contact {
   position: relative;
   z-index: 4;
   min-height: 110vh;
   background: linear-gradient(white, #d9d9d9);

 }

 .contact-glass {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 16px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.3);
 }


 .btn-one {
   color: #FFF;
   transition: all 0.3s;
   position: relative;
 }

 .btn-one span {
   transition: all 0.3s;
 }

 .btn-one::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   opacity: 0;
   transition: all 0.3s;
   border-top-width: 2px;
   border-bottom-width: 2px;
   border-top-style: solid;
   border-bottom-style: solid;
   border-top-color: rgba(0, 0, 0, 0.5);
   border-bottom-color: rgba(0, 0, 0, 0.5);
   transform: scale(0.1, 1);
 }

 .btn-one:hover span {
   letter-spacing: 2px;
 }

 .btn-one:hover::before {
   opacity: 1;
   transform: scale(1, 1);
 }

 .btn-one::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   transition: all 0.3s;
   background-color: rgba(255, 255, 255, 0.1);
 }

 .btn-one:hover::after {
   opacity: 0;
   transform: scale(0.1, 1);
 }

 .wrapper {
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }

 .box div {
   position: absolute;
   width: 60px;
   height: 60px;
   background-color: transparent;
   border: 2px solid rgb(29, 109, 134);
   border-radius: 10px;
   ;
 }

 .box div:nth-child(1) {
   top: 12%;
   left: 42%;
   animation: animate 10s linear infinite;
 }

 .box div:nth-child(2) {
   top: 70%;
   left: 50%;
   animation: animate 7s linear infinite;
 }

 .box div:nth-child(3) {
   top: 17%;
   left: 6%;
   animation: animate 9s linear infinite;
 }

 .box div:nth-child(4) {
   top: 20%;
   left: 60%;
   animation: animate 10s linear infinite;
 }

 .box div:nth-child(5) {
   top: 67%;
   left: 10%;
   animation: animate 6s linear infinite;
 }

 .box div:nth-child(6) {
   top: 90%;
   left: 25%;
   animation: animate 12s linear infinite;
 }

 .box div:nth-child(7) {
   top: 60%;
   left: 80%;
   animation: animate 15s linear infinite;
 }

 .box div:nth-child(8) {
   top: 32%;
   left: 25%;
   animation: animate 16s linear infinite;
 }

 .box div:nth-child(9) {
   top: 90%;
   left: 25%;
   animation: animate 9s linear infinite;
 }

 .box div:nth-child(10) {
   top: 20%;
   left: 80%;
   animation: animate 5s linear infinite;
 }

 @keyframes animate {
   0% {
     transform: scale(0) translateY(0) rotate(0);
     opacity: 1;
   }

   100% {
     transform: scale(1.3) translateY(-90px) rotate(360deg);
     opacity: 1;
   }
 }

 .emoji-flag {
   font-family: 'Segoe UI', 'Noto Color Emoji', 'Apple Color Emoji', 'Android Emoji', sans-serif;
   font-size: 0.875rem;
 }