<<<<<<< HEAD
* {
  font-family: "LS Sans", "Inter";
}

.text-hero {
  text-align: center;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 64px;
  font-style: normal;
  font-weight: 600;
  line-height: 64px;
  letter-spacing: 0.15px;
}

.heading-lg{
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.05px;
}

.heading-3xl {
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: 0.15px;
}

.truncate-one-line {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.truncate-two-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.margin-top-section {
  margin-top: 100px;
}

.text-section {
  color: #1E2223;
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.1px;
}

.text-body-lg {
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.05px;
}

.text-body-md {
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.05px;
}

.text-primary-color {
  color: #1E2223;
}

.text-feeble-color {
  color: #6C6F70;
}

.interactive {
  color: #1976E4;
}

.tag-yt {
  display: flex;
  padding: 2px 8px;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: rgba(21, 20, 20, 0.70);
}

.text-over-interactive {
  color: #FFF;
}

.tabs {
  overflow-x: hidden;
  display: flex;
  flex-shrink: 0;
  column-gap: 24px;
  justify-content: center;
}

.tab-content {
  display: none;
  position: relative;
}

.tab-switcher {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 264px;
  padding: 16px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #CBCECF;
  background-color: #FFF;
}

.tab-switcher .clover-top {
  position: absolute;
  top: -50%;
  right: -10%;
}

.tab-switcher .clover-bottom {
  position: absolute;
  bottom: -50%;
  left: -10%;
}

.tab-switcher.active {
  background-color: #FC0;
  border-color: #1E2223;
  font-weight: 500;
  svg path.active {
    fill: #6C6F70;
  }
  .clover-top {
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));
  }
  .clover-bottom {
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));
  }
}

.scroll-h {
  display: flex;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
  gap: 24px;
}

.card-user {
  display: flex;
  width: 288px;
  padding: 4px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid #CBCECF;
  background: #FFF;
  .profile {
    width: 100%;
    height: 220px;
    align-self: stretch;
    object-fit: cover;
    border-radius: 8px;
    background-repeat: no-repeat;
  }
  .body {
    display: flex;
    padding: 0px 12px 12px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    flex: 1 0 0;
    .identity {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      flex: 1 0 0;
      align-self: stretch;
      .university {
        display: flex;
        padding: 4px 0px;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        .univ-image {
          width: 16px;
          height: 16px;
        }
        .univ-name {
          max-height: 22px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          flex: 1 0 0;
        }
      }
      .name {
        color: #1E2223;
        font-feature-settings: 'liga' off, 'clig' off;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 26px;
        letter-spacing: 0.05px;
      }
      .role {
        color: #6C6F70;
        font-feature-settings: 'liga' off, 'clig' off;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: -0.05px;
      }
    }
    .graduate {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      align-self: stretch;
      .after-graduate {
        color: #6C6F70;
        font-feature-settings: 'liga' off, 'clig' off;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: -0.1px;
      }
      .company {
        display: flex;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        img {
          width: 48px;
          height: 48px;
          object-fit: cover;
          background-repeat: no-repeat;
          border-radius: 8px;
        }
        .work {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
          flex: 1 0 0;
          .name {
            align-self: stretch;
            color: #1E2223;
            font-feature-settings: 'liga' off, 'clig' off;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 22px;
            letter-spacing: -0.05px;
          }
          .office {
            align-self: stretch;
            color: #6C6F70;
            font-feature-settings: 'liga' off, 'clig' off;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            letter-spacing: -0.05px;
          }
        }
      }
    }
  }
}

.review-user-card {
  position: relative;
  overflow: hidden;
  display: flex;
  width: 392px;
  padding: 40px 16px 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 3px solid #FFF;
  background: #FFF;
  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.05);
  .head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 80px;
      border: 3px solid #FFF;
      object-fit: cover;
      background-repeat: no-repeat;
    }
    .tags {
      display: flex;
      align-items: center;
      gap: 12px;
      align-self: stretch;
      .program {
        display: flex;
        padding: 2px 12px;
        justify-content: center;
        align-items: center;
        border-radius: 22px;
        background: #FC0;
      }
      .batch {
        display: flex;
        padding: 2px 12px;
        justify-content: center;
        align-items: center;
        border-radius: 22px;
        background: #1976E4;
      }
    }
  }
  .body {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    .identity {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      align-self: stretch;
      .name {
        align-self: stretch;
        font-weight: 500;
      }
      .role {
        align-self: stretch;
      }
    }
    .review-text {
      /*flex: 1 0 0;
      align-self: stretch;*/
      -webkit-line-clamp: 10;
      line-clamp: 10;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;

    }
    .cta {
      display: flex;
      align-items: center;
      gap: 8px;
      align-self: stretch;
      color: #1976E4;
      .detail {
        flex: 1 0 0;
      }
    }
  }
}

.blur-ball {
  width: 290px;
  height: 290px;
  position: absolute;
  left: 35px;
  top: -210px;
  border-radius: 290px;
  background: #FC0;
  filter: blur(87px);
  z-index: 0;
}

.clover-section-top {
  position: absolute;
  top: -150px;
  right: -50px;
  width: 350px;
  height: 350px;
  flex-shrink: 0;
  z-index: -1;
}

.clover-section-bot {
  position: absolute;
  bottom: -150px;
  left: -50px;
  width: 350px;
  height: 350px;
  flex-shrink: 0;
  z-index: -1;
}

.video-card {
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-shrink: 0;
  width: 288px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid #CBCECF;
  background: #FFF;
  .thumbnail {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .thumbnail:hover {
    transform: scale(1.05);
  }
  .title {
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    .text {
      font-weight: 500;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;  
      overflow: hidden;
    }
  }
}

.clover-video {
  position: absolute; 
  z-index: -1; 
  left: 0%;
  top: 0%;
  width: 7%;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  .cover {
    display: flex;
    height: 264px;
    padding: 16px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 12px;
    background-repeat: no-repeat;
    background-size: cover;
    .benefit-text {
      align-self: stretch;
    }
  }
  img {
    width: 100%;
    height: 264px;
  }
  .text-benefit {
    flex: 1 0 0;
    align-self: stretch;
  }
}

.portfolio-back {
  display: flex;
  width: 100%;
  position: absolute;
  z-index: -2;
  height: 254px;
  overflow: hidden;
  background: rgba(255, 204, 0, 0.30);
  .right {
    position: absolute;
    right: -7%;
    top: -10%;
    z-index: -1;
  }
  .left {
    position: absolute;
    left: -7%;
    top: -10%;
    z-index: -1;
  }
}

.portfolio-card {
  display: flex;
  width: 288px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid #CBCECF;
  overflow: hidden;
  .cover {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-repeat: no-repeat;
  }
  .body {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    .tag-title {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      align-self: stretch;
    }
    .user {
      display: flex;
      align-items: center;
      gap: 12px;
      align-self: stretch;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        object-fit: cover;
        background-repeat: no-repeat;
      }
      .name-role {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        flex: 1 0 0;
      }
    }
  }
}

.event-card {
  display: flex;
  width: 288px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid #CBCECF;
  overflow: hidden;
  .cover {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-repeat: no-repeat;
  }
  .body {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    .tag-title {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      align-self: stretch;
    }
    .event-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      align-self: stretch;
      .item {
        display: flex;
        align-items: center;
        gap: 6px;
        align-self: stretch;
      }
    }
  }
}

.join-banner {
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 20px;
  align-items: flex-start;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid #8F7200;
  background: #FFFCEF;
  .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
    z-index: 1;
    .outline-btn {
      display: flex;
      padding: 8px 16px;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      border: 1px solid #4C4F50;
      box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.07);
    }
  }
  .sunflower-abs {
    position: absolute;
    right: -200px;
    bottom: -200px;
  }
}

.button-primary-bb {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 4px;
  background: #FFD21E;
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.07);
  border: 0;
}

.scroll-buttons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: none;
}

.arrow-button {
  width: 48px;
  height: 48px;
  justify-content: center;;
  display: flex;
  padding: 8px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 100%;
  border: 1px solid #CBCECF;
  background: #FFF;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.07);
}

.left {
  left: -10px;
}

.right {
  right: -10px;
}

.ball {
  
  --delay:0s;
  --size:0.3;
  --speed: 7s;
  
  aspect-ratio:1;
  width:calc( 150% * var(--size) );
  background-color: #FC0;
  filter:blur( 5vw );
  
  border-radius:50%;
  
  position:absolute;
  top:-30%;
  z-index: -1;
  
  animation: loop var(--speed) infinite linear;
  animation-delay: var(--delay);
  transform-origin: 50% 50%;
  
  opacity:1;
}

@keyframes loop {
  0% { transform: translate3D( 50%, -80%, 0 ) rotate(0deg); }
  5% { transform: translate3D( 50%, -80%, 0 ) rotate(18deg); }
  10% { transform: translate3D( 50%, -80%, 0 ) rotate(36deg); }
  15% { transform: translate3D( 50%, -80%, 0 ) rotate(54deg); }
  20% { transform: translate3D( 50%, -80%, 0 ) rotate(72deg); }
  25% { transform: translate3D( 70%, -75%, 0 ) rotate(90deg); }
  30% { transform: translate3D( 70%, -75%, 0 ) rotate(108deg); }
  35% { transform: translate3D( 70%, -75%, 0 ) rotate(125deg); }
  40% { transform: translate3D( 70%, -75%, 0 ) rotate(144deg); }
  45% { transform: translate3D( 50%, -75%, 0 ) rotate(162deg); }
  50% { transform: translate3D( 50%, -60%, 0 ) rotate(180deg); }
  55% { transform: translate3D( 50%, -60%, 0 ) rotate(198deg); }
  60% { transform: translate3D( 50%, -60%, 0 ) rotate(216deg); }
  65% { transform: translate3D( 10%, -75%, 0 ) rotate(234deg); }
  70% { transform: translate3D( 10%, -75%, 0 ) rotate(251deg); }
  75% { transform: translate3D( 10%, -75%, 0 ) rotate(270deg); }
  80% { transform: translate3D( 10%, -80%, 0 ) rotate(288deg); }
  85% { transform: translate3D( 10%, -80%, 0 ) rotate(306deg); }
  90% { transform: translate3D( 50%, -80%, 0 ) rotate(324deg); }
  100% { transform: translate3D( 50%, -80%, 0 ) rotate(360deg); }
  
}

.glow-container {
  position: relative;
  overflow-x:hidden;
  overflow-y: hidden;
  width: 100%;
}

.move-tag {
  position: absolute;
  display: inline-flex;
  padding: 6px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  font-weight: 500;
}

.ux {
  top: 100px;
  left: 250px;
  background-color: #1976E4;
  color: #FFF;
  animation: ux-loop 4s infinite linear;
}

.design {
  top: 250px;
  left: 290px;
  background-color: #DC408B;
  color: #FFF;
  animation: design-loop 4s infinite linear
}

.web {
  top: 70px;
  left: 45%;
  transform: translateY(50%);
  background-color: #09304D;
  color: #FFF;
  animation: web-loop 4s infinite linear;
}

.content {
  top: 100px;
  right: 220px;
  background-color: #DD3D0A;
  color: #FFF;
  animation: content-loop 4s infinite linear;
}

.marketing {
  top: 220px;
  right: 290px;
  background-color: #FFCC00;
  animation: digmar-loop 4s infinite linear;
}

@keyframes ux-loop {
  0% { transform: translate(0%, 0%); }
  25% { transform: translate(5%, 5%); }
  50% { transform: translate(10%, 10%); }
  75% { transform: translate(5%, 5%); }
  100% { transform: translate(0%, 0%); }
}

@keyframes design-loop {
  0% { transform: translate(0%, 0%);}
  25% { transform: translate(10%, -10%);}
  50% { transform: translate(25%, -25%);}
  75% { transform: translate(10%, -10%);}
  100% { transform: translate(0%, 0%);}  
}

@keyframes web-loop {
  0% { transform: translate(0%, 0%);}
  25% { transform: translate(-10%, -10%);}
  50% { transform: translate(0%, 0%);}
  75% { transform: translate(10%, 10%);}
  100% { transform: translate(0%, 0%);}  
}

@keyframes content-loop {
  0% { transform: translate(0%, 0%);}
  25% { transform: translate(-20%, -20%);}
  50% { transform: translate(-35%, -5%);}
  75% { transform: translate(-20%, 20%);}
  100% { transform: translate(0%, 0%);}  
}

@keyframes digmar-loop {
  0% { transform: translate(0%, 0%);}
  25% { transform: translate(-10%, 10%);}
  50% { transform: translate(-25%, 25%);}
  75% { transform: translate(-10%, 10%);}
  100% { transform: translate(0%, 0%);}  
=======
/* * {
  font-family: "LS Sans", "Inter";
} */

.text-hero {
  text-align: center;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 64px;
  font-style: normal;
  font-weight: 600;
  line-height: 64px;
  letter-spacing: 0.15px;
}

.heading-lg{
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.05px;
}

.heading-3xl {
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: 0.15px;
}

.truncate-one-line {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.truncate-two-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.margin-top-section {
  margin-top: 100px;
}

.text-section {
  color: #1E2223;
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.1px;
}

.text-body-lg {
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.05px;
}

.text-body-md {
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.05px;
}

.text-primary-color {
  color: #1E2223;
}

.text-feeble-color {
  color: #6C6F70;
}

.interactive {
  color: #1976E4;
}

.tag-yt {
  display: flex;
  padding: 2px 8px;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: rgba(21, 20, 20, 0.70);
}

.text-over-interactive {
  color: #FFF;
}

.tabs {
  overflow-x: hidden;
  display: flex;
  flex-shrink: 0;
  column-gap: 24px;
  justify-content: center;
}

.tab-content {
  display: none;
  position: relative;
}

.tab-switcher {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 264px;
  padding: 16px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #CBCECF;
  background-color: #FFF;
}

.tab-switcher .clover-top {
  position: absolute;
  top: -50%;
  right: -10%;
}

.tab-switcher .clover-bottom {
  position: absolute;
  bottom: -50%;
  left: -10%;
}

.tab-switcher.active {
  background-color: #FC0;
  border-color: #1E2223;
  font-weight: 500;
  svg path.active {
    fill: #6C6F70;
  }
  .clover-top {
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));
  }
  .clover-bottom {
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));
  }
}

.scroll-h {
  display: flex;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
  gap: 24px;
}

.card-user {
  display: flex;
  width: 288px;
  padding: 4px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid #CBCECF;
  background: #FFF;
  .profile {
    width: 100%;
    height: 220px;
    align-self: stretch;
    object-fit: cover;
    border-radius: 8px;
    background-repeat: no-repeat;
  }
  .body {
    display: flex;
    padding: 0px 12px 12px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    flex: 1 0 0;
    .identity {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      flex: 1 0 0;
      align-self: stretch;
      .university {
        display: flex;
        padding: 4px 0px;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        .univ-image {
          width: 16px;
          height: 16px;
        }
        .univ-name {
          max-height: 22px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          flex: 1 0 0;
        }
      }
      .name {
        color: #1E2223;
        font-feature-settings: 'liga' off, 'clig' off;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 26px;
        letter-spacing: 0.05px;
      }
      .role {
        color: #6C6F70;
        font-feature-settings: 'liga' off, 'clig' off;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: -0.05px;
      }
    }
    .graduate {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      align-self: stretch;
      .after-graduate {
        color: #6C6F70;
        font-feature-settings: 'liga' off, 'clig' off;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: -0.1px;
      }
      .company {
        display: flex;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        img {
          width: 48px;
          height: 48px;
          object-fit: cover;
          background-repeat: no-repeat;
          border-radius: 8px;
        }
        .work {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
          flex: 1 0 0;
          .name {
            align-self: stretch;
            color: #1E2223;
            font-feature-settings: 'liga' off, 'clig' off;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 22px;
            letter-spacing: -0.05px;
          }
          .office {
            align-self: stretch;
            color: #6C6F70;
            font-feature-settings: 'liga' off, 'clig' off;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            letter-spacing: -0.05px;
          }
        }
      }
    }
  }
}

.review-user-card {
  position: relative;
  overflow: hidden;
  display: flex;
  width: 392px;
  padding: 40px 16px 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 3px solid #FFF;
  background: #FFF;
  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.05);
  .head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 80px;
      border: 3px solid #FFF;
      object-fit: cover;
      background-repeat: no-repeat;
    }
    .tags {
      display: flex;
      align-items: center;
      gap: 12px;
      align-self: stretch;
      .program {
        display: flex;
        padding: 2px 12px;
        justify-content: center;
        align-items: center;
        border-radius: 22px;
        background: #FC0;
      }
      .batch {
        display: flex;
        padding: 2px 12px;
        justify-content: center;
        align-items: center;
        border-radius: 22px;
        background: #1976E4;
      }
    }
  }
  .body {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    .identity {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      align-self: stretch;
      .name {
        align-self: stretch;
        font-weight: 500;
      }
      .role {
        align-self: stretch;
      }
    }
    .review-text {
      /*flex: 1 0 0;
      align-self: stretch;*/
      -webkit-line-clamp: 10;
      line-clamp: 10;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;

    }
    .cta {
      display: flex;
      align-items: center;
      gap: 8px;
      align-self: stretch;
      color: #1976E4;
      .detail {
        flex: 1 0 0;
      }
    }
  }
}

.blur-ball {
  width: 290px;
  height: 290px;
  position: absolute;
  left: 35px;
  top: -210px;
  border-radius: 290px;
  background: #FC0;
  filter: blur(87px);
  z-index: 0;
}

.clover-section-top {
  position: absolute;
  top: -150px;
  right: -50px;
  width: 350px;
  height: 350px;
  flex-shrink: 0;
  z-index: -1;
}

.clover-section-bot {
  position: absolute;
  bottom: -150px;
  left: -50px;
  width: 350px;
  height: 350px;
  flex-shrink: 0;
  z-index: -1;
}

.video-card {
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-shrink: 0;
  width: 288px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid #CBCECF;
  background: #FFF;
  .thumbnail {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .thumbnail:hover {
    transform: scale(1.05);
  }
  .title {
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    .text {
      font-weight: 500;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;  
      overflow: hidden;
    }
  }
}

.clover-video {
  position: absolute; 
  z-index: -1; 
  left: 0%;
  top: 0%;
  width: 7%;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  .cover {
    display: flex;
    height: 264px;
    padding: 16px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 12px;
    background-repeat: no-repeat;
    background-size: cover;
    .benefit-text {
      align-self: stretch;
    }
  }
  img {
    width: 100%;
    height: 264px;
  }
  .text-benefit {
    -webkit-line-clamp: 5;
    line-clamp: 10;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /*flex: 1 0 0;*/
    align-self: stretch;
  }
}

.portfolio-back {
  display: flex;
  width: 100%;
  position: absolute;
  z-index: -2;
  height: 254px;
  overflow: hidden;
  background: rgba(255, 204, 0, 0.30);
  .right {
    position: absolute;
    right: -7%;
    top: -10%;
    z-index: -1;
  }
  .left {
    position: absolute;
    left: -7%;
    top: -10%;
    z-index: -1;
  }
}

.portfolio-card {
  display: flex;
  width: 288px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  min-height: 325px !important;
  border: 1px solid #CBCECF;
  overflow: hidden;
  .cover {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-repeat: no-repeat;
  }
  .body {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    .tag-title {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      align-self: stretch;
    }
    .user {
      display: flex;
      align-items: center;
      gap: 12px;
      align-self: stretch;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        object-fit: cover;
        background-repeat: no-repeat;
      }
      .name-role {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        flex: 1 0 0;
      }
    }
  }
}

.event-card {
  display: flex;
  width: 288px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid #CBCECF;
  overflow: hidden;
  .cover {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-repeat: no-repeat;
  }
  .body {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    .tag-title {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      align-self: stretch;
    }
    .event-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      align-self: stretch;
      .item {
        display: flex;
        align-items: center;
        gap: 6px;
        align-self: stretch;
      }
    }
  }
}

.join-banner {
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 20px;
  align-items: flex-start;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid #8F7200;
  background: #FFFCEF;
  .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
    z-index: 1;
    .outline-btn {
      display: flex;
      padding: 8px 16px;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      border: 1px solid #4C4F50;
      box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.07);
    }
  }
  .sunflower-abs {
    position: absolute;
    right: -200px;
    bottom: -200px;
  }
}

.button-primary-bb {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 4px;
  background: #FFD21E;
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.07);
  border: 0;
}

.scroll-buttons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: none;
}

.arrow-button {
  width: 48px;
  height: 48px;
  justify-content: center;;
  display: flex;
  padding: 8px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 100%;
  border: 1px solid #CBCECF;
  background: #FFF;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.07);
}

.left {
  left: -10px;
}

.right {
  right: -10px;
}

.ball {
  
  --delay:0s;
  --size:0.3;
  --speed: 7s;
  
  aspect-ratio:1;
  width:calc( 150% * var(--size) );
  background-color: #FC0;
  filter:blur( 5vw );
  
  border-radius:50%;
  
  position:absolute;
  top:-30%;
  z-index: -1;
  
  animation: loop var(--speed) infinite linear;
  animation-delay: var(--delay);
  transform-origin: 50% 50%;
  
  opacity:1;
}

@keyframes loop {
  0% { transform: translate3D( 50%, -80%, 0 ) rotate(0deg); }
  5% { transform: translate3D( 50%, -80%, 0 ) rotate(18deg); }
  10% { transform: translate3D( 50%, -80%, 0 ) rotate(36deg); }
  15% { transform: translate3D( 50%, -80%, 0 ) rotate(54deg); }
  20% { transform: translate3D( 50%, -80%, 0 ) rotate(72deg); }
  25% { transform: translate3D( 70%, -75%, 0 ) rotate(90deg); }
  30% { transform: translate3D( 70%, -75%, 0 ) rotate(108deg); }
  35% { transform: translate3D( 70%, -75%, 0 ) rotate(125deg); }
  40% { transform: translate3D( 70%, -75%, 0 ) rotate(144deg); }
  45% { transform: translate3D( 50%, -75%, 0 ) rotate(162deg); }
  50% { transform: translate3D( 50%, -60%, 0 ) rotate(180deg); }
  55% { transform: translate3D( 50%, -60%, 0 ) rotate(198deg); }
  60% { transform: translate3D( 50%, -60%, 0 ) rotate(216deg); }
  65% { transform: translate3D( 10%, -75%, 0 ) rotate(234deg); }
  70% { transform: translate3D( 10%, -75%, 0 ) rotate(251deg); }
  75% { transform: translate3D( 10%, -75%, 0 ) rotate(270deg); }
  80% { transform: translate3D( 10%, -80%, 0 ) rotate(288deg); }
  85% { transform: translate3D( 10%, -80%, 0 ) rotate(306deg); }
  90% { transform: translate3D( 50%, -80%, 0 ) rotate(324deg); }
  100% { transform: translate3D( 50%, -80%, 0 ) rotate(360deg); }
  
}

.glow-container {
  position: relative;
  overflow-x:hidden;
  overflow-y: hidden;
  width: 100%;
}

.move-tag {
  position: absolute;
  display: inline-flex;
  padding: 6px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  font-weight: 500;
}

.ux {
  top: 100px;
  left: 250px;
  background-color: #1976E4;
  color: #FFF;
  animation: ux-loop 4s infinite linear;
}

.design {
  top: 250px;
  left: 290px;
  background-color: #DC408B;
  color: #FFF;
  animation: design-loop 4s infinite linear
}

.web {
  top: 70px;
  left: 45%;
  transform: translateY(50%);
  background-color: #09304D;
  color: #FFF;
  animation: web-loop 4s infinite linear;
}

.content {
  top: 100px;
  right: 220px;
  background-color: #DD3D0A;
  color: #FFF;
  animation: content-loop 4s infinite linear;
}

.marketing {
  top: 220px;
  right: 290px;
  background-color: #FFCC00;
  animation: digmar-loop 4s infinite linear;
}

@keyframes ux-loop {
  0% { transform: translate(0%, 0%); }
  25% { transform: translate(5%, 5%); }
  50% { transform: translate(10%, 10%); }
  75% { transform: translate(5%, 5%); }
  100% { transform: translate(0%, 0%); }
}

@keyframes design-loop {
  0% { transform: translate(0%, 0%);}
  25% { transform: translate(10%, -10%);}
  50% { transform: translate(25%, -25%);}
  75% { transform: translate(10%, -10%);}
  100% { transform: translate(0%, 0%);}  
}

@keyframes web-loop {
  0% { transform: translate(0%, 0%);}
  25% { transform: translate(-10%, -10%);}
  50% { transform: translate(0%, 0%);}
  75% { transform: translate(10%, 10%);}
  100% { transform: translate(0%, 0%);}  
}

@keyframes content-loop {
  0% { transform: translate(0%, 0%);}
  25% { transform: translate(-20%, -20%);}
  50% { transform: translate(-35%, -5%);}
  75% { transform: translate(-20%, 20%);}
  100% { transform: translate(0%, 0%);}  
}

@keyframes digmar-loop {
  0% { transform: translate(0%, 0%);}
  25% { transform: translate(-10%, 10%);}
  50% { transform: translate(-25%, 25%);}
  75% { transform: translate(-10%, 10%);}
  100% { transform: translate(0%, 0%);}  
>>>>>>> 1de9c36bc7e89fc1395b0b3f8bd9a141478617c1
}