.swirl-icon {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 25.4%;
  right: -11.94%;
  bottom: -25.4%;
  left: 11.94%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  opacity: 0.33;
}
.cubes-child,
.cubes-inner,
.cubes-item {
  position: absolute;
  height: 23.42%;
  width: 22.06%;
  top: 70.05%;
  right: 77.94%;
  bottom: 6.53%;
  left: 0;
  border-radius: 59.22px;
  background-color: var(--color-gray-200);
  box-shadow: 0-24px 39px #040406,
    0 10.76672077178955px 26.92px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(86.13px);
  transform: rotate(-45deg);
  transform-origin: 0 0;
}
.cubes-inner,
.cubes-item {
  height: 18.22%;
  width: 17.16%;
  top: 16.56%;
  right: 15.28%;
  bottom: 65.22%;
  left: 67.55%;
}
.cubes-inner {
  height: 23.42%;
  width: 22.06%;
  top: 59.17%;
  right: 13.8%;
  bottom: 17.41%;
  left: 64.13%;
  box-shadow: 0 25px 39px #040406,
    0 10.76672077178955px 26.92px rgba(0, 0, 0, 0.1);
}
.cubes,
.frame1 {
  position: relative;
  width: 1521.8px;
  height: 1433.8px;
}
.frame1 {
  position: absolute;
  top: 0;
  left: 323.06px;
  height: 1903.86px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.frame {
  position: relative;
  width: 100vw;
  height: 200vh;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 0;
}
.pmg-bottom-40px {
  position: relative;
  width: 634px;
  height: 28px;
}
.frame4 {
  width: 634px;
  height: 1066.06px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.div,
.shorten-your-loooong {
  position: relative;
  line-height: 80.01px;
  font-weight: 800;
  background: linear-gradient(
    89.92deg,
    #144ee3,
    #eb568e 18.75%,
    #a353aa 64.06%,
    #144ee3
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.shorten-your-loooong {
  position: absolute;
  top: 0;
  left: 9.32%;
}
.shorten-your-loooong-links {
  position: relative;
  width: 966px;
  height: 81px;
  text-align: center;
}
.parent {
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.abtn-secondary,
.abtn-secondary-child {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: white;
}
.abtn-secondary-child {
  border: 0;
  background-color: transparent;
  font-weight: 300;
  font-family: var(--font-font-awesome-6-pro);
  font-size: 20px;
  justify-content: center;
}
.abtn-secondary {
  border-radius: var(--br-29xl);
  background-color: var(--color-gray-100);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 4px solid rgba(20, 78, 227, 0.1);
  box-sizing: border-box;
  width: 614px;
  height: 61px;
  justify-content: flex-start;
  padding: var(--padding-2xl) 25.1875px var(--padding-2xl) var(--padding-6xl);
}
.shorten-now {
  position: relative;
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
  font-family: var(--font-inter);
  color: #fff;
  text-align: center;
}
.abtn-secondary-parent,
.btn-primary {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.btn-primary {
  cursor: pointer;
  border: 1px solid var(--color-mediumslateblue-100);
  padding: var(--padding-2xl) 25.046875px var(--padding-2xl) var(--padding-6xl);
  background-color: var(--color-mediumslateblue-100);
  border-radius: var(--br-29xl);
  box-shadow: 10px 9px 22px rgba(20, 78, 227, 0.38);
  box-sizing: border-box;
  width: 186px;
  height: 61px;
  justify-content: center;
  margin-left: -185px;
}
.abtn-secondary-parent {
  width: 611px;
  height: 76px;
  justify-content: flex-end;
}
.frame-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.frame-wrapper,
.original-link,
.short-link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame-wrapper {
  width: 966px;
  height: 198px;
  flex-direction: column;
}
.original-link,
.short-link {
  flex-shrink: 0;
}
.short-link {
  position: relative;
  width: 258px;
}
.original-link {
  width: 404px;
}
.clicks,
.original-link,
.qr-code {
  position: relative;
}
.clicks {
  justify-content: center;
  width: 58px;
  flex-shrink: 0;
}
.abtn-secondary1,
.clicks,
.date {
  display: flex;
  align-items: center;
}
.date {
  position: relative;
  justify-content: center;
  width: 107px;
  flex-shrink: 0;
}
.abtn-secondary1 {
  align-self: stretch;
  border-radius: var(--br-3xs) var(--br-3xs) 0 0;
  background-color: var(--color-gray-100);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(28px);
  height: 63px;
  flex-direction: row;
  justify-content: flex-start;
  padding: var(--padding-2xl) 75px var(--padding-2xl) var(--padding-6xl);
  box-sizing: border-box;
  gap: 122px;
  font-size: var(--font-size-mini);
}
.httpslink {
  position: relative;
  font-weight: 300;
}
a {
  color: #C9CED6;
}

.copy {
  position: relative;
  line-height: 28px;
}
.copy-wrapper {
  border-radius: var(--br-12xl);
  background-color: var(--color-gray-300);
  width: 10px;
  height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  font-size: var(--font-size-mini);
  font-family: var(--font-font-awesome-6-pro);
}
.copy img{
  width: 32px;
  height: 32px;
}
.httpslink-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
.image-5-icon {
  position: relative;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  object-fit: cover;
}
.image-5-parent {
  width: 393px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  gap: var(--gap-3xs);
  text-align: left;
}
.image-4-icon {
  position: relative;
  width: 36px;
  height: 36px;
  object-fit: cover;
}
.abtn-secondary2 {
  align-self: stretch;
  background-color: var(--color-gray-400);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(56px);
  height: 63px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-2xl) 25.1875px var(--padding-2xl) var(--padding-6xl);
  box-sizing: border-box;
}

.copy {
  border: none;
  color: #333;
  padding: 8px 16px;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.copy:hover {
  background-color: #e0e0e0;
}


@keyframes copiedAnimation {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }

}

.copied-animation {
  animation: copiedAnimation 0.5s;
}



.httpslink1 {
  position: relative;
  font-weight: 300;
  color: inherit;
  text-decoration: none;
}
.httpslink-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-mini);
}
.image-5-icon1 {
  position: relative;
  width: 32px;
  height: 32px;
  object-fit: cover;
}
.httpswwwyoutubecomwatch {
  position: relative;
  font-weight: 300;
  display: flex;
  align-items: center;
  width: 330px;
  flex-shrink: 0;
}

.actual-scroll{
  display: flex;
  flex-direction: row;
  overflow: hidden;
  overflow-y:auto ;
  overflow-x:scroll ;
  max-height: 50px;
}
.actual-scroll::-webkit-scrollbar {
  width: 0px;
}
.image-5-icon2 {
  position: relative;
  border-radius: 5px;
  width: 32px;
  height: 32px;
  object-fit: cover;
}
.abtn-secondary-group,
.div4,
.frame-parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
.scrollbar{
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  
  width: 100%;
  max-height: 40vh;

}
.scrollbar::-webkit-scrollbar {
  width: 0px;
}


.div4 {
  position: relative;
  font-weight: 300;
  width: 39px;
  flex-shrink: 0;
}
.abtn-secondary-group,
.frame-parent {
  flex-direction: column;
}
.abtn-secondary-group {
  width: 1421px;
  gap: 3px;
}
.frame-parent {
  gap: 40px;
  text-align: center;
  font-size: var(--font-size-sm);
}
.frame5,
.frame6 {
  flex-shrink: 0;
  flex-direction: column;
}
.frame6 {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame5 {
  width: 100vw;
  height: 100vh;
  margin-top: -1066px;
}
.frame2,
.frame3,
.frame5,
.main-page-trial-page {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100vh;
}
.frame3 {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  flex-direction: column;
}
.frame2,
.main-page-trial-page {
  flex-direction: row;
}
.frame2 {
  margin: 0 !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  z-index: 1;
}
.main-page-trial-page {
  position: relative;
  background-color: #0b101b;
  width: 100%;
  height: 100%;
  gap: var(--gap-3xs);
  text-align: right;
  font-size: var(--font-size-41xl);
  color: var(--color-lightgray);
  font-family: var(--font-inter);
}