@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Manrope:wght@200..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

body {
  font-family: "DM Sans", serif;
  overflow-x: hidden !important;
}

html {
  scroll-behavior: smooth;
}
.topbar {
    position: sticky;
    top: 0px;
    z-index: 999;
}
.img-line{
	max-width: 300px;
    margin: auto;
    border: 1px solid #e7e7e7;
    border-radius: 15px;
}
/* SECTIONS */
.sec_1 {
  background: url("https://fastcdn.clipsmateai.com/bundle/assets/bundle-sec1.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.sec_13 {
  background: url("https://fastcdn.clipsmateai.com/bundle/assets/bundle-sec13.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sec5-mini {
  background: url("https://fastcdn.clipsmateai.com/bundle/assets/sec5-mini.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.mini-bg7 {
  background: url("https://fastcdn.clipsmateai.com/bundle/assets/mini-bg7.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  background-color: rgba(183, 158, 255, 0.3);
  padding: 10px;
  border-radius: 20px;
  overflow: hidden;
  /* margin: auto; */
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border: none;
}

.btn-box {
  border-radius: 105.833px;

  border: 2px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(
    90deg,
    #c71dff 0%,
    #b79eff 67.67%,
    #fa7596 97.67%
  );
  box-shadow: 0px 32px 68.1px -30px rgba(153, 7, 201, 0.3);
}

.vid-bg {
  background: url("https://fastcdn.clipsmateai.com/bundle/assets/vid.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.types {
  background: url("https://fastcdn.clipsmateai.com/bundle/assets/types-bg.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

@keyframes bounce-smooth {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    left: 50%;
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
    left: 50%;
  }
}

.animate-bounce-smooth {
  animation: bounce-smooth 0.5s ease-in-out infinite;
  /* position: absolute;
  left: 50%; */
  transform: translateX(-50%);
}

.hover-effect {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.hover-effect:hover {
  transform: scale(1.05);
}

.text-grad2 {
  background: var(
    --Linear,
    linear-gradient(93deg, #c71dff 0%, #b79eff 59.17%, #fa7596 112.3%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes moveSideways {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(15px);
  }
}

.arrow-animate {
  animation: moveSideways 1s ease-in-out infinite;
}

.text-grad3 {
  background: linear-gradient(
    93deg,
    #f8df3e 38.26%,
    #b79eff 53.24%,
    #fa7596 66.7%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.video-container2 {
  position: relative;
  width: 100%;
  max-width: 999px;
  aspect-ratio: 16 / 9;
  background: url("https://fastcdn.clipsmateai.com/bundle/assets/vid-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 10px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}

.video-container2 iframe {
  width: 80%;
  height: 80%;
  max-width: 700px;
  margin-top: -2rem;
}

.bg-grad1 {
  border-radius: 10px;
  background: linear-gradient(230deg, #b79eff -1.95%, #c71dff 100.5%);
}

.text-grad4 {
  background: linear-gradient(
    93deg,
    #94ef5b 39.9%,
    #f8df3e 65.11%,
    #fa7596 87.76%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.transition-height {
  transition: max-height 1s ease;
}
.switch-section {
  background-color: transparent;
}

.switch-section .container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  max-width: 1300px;
  margin: 0 auto;
}

.switch-section #tabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.switch-section .tab {
  background-color: #560c75;
  border: 4px solid #ffffff38;
  border-radius: 24px;
  cursor: pointer;
  color: #fff;
  overflow: hidden;
  /* max-height: 81px; */
  transition: max-height 0.6s ease, border-color 0.3s ease;
}

.switch-section .tab.active {
  border-color: rgba(183, 158, 255, 0.3);
  background-color: #fff;
  max-height: 300px;
}

.switch-section .tab-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;

  transition: color 0.3s ease;
}

.switch-section .tab.active .tab-header {
  color: #560c75;
}

.switch-section .tab-header img {
  /* width: 24px;
  height: 24px; */
  object-fit: contain;
  width: 60px;
  height: 60px;
}

.switch-section .tab-title {
  font-size: 25px;
  font-weight: 700;
  user-select: none;
  line-height: 30px;
}

.switch-section .tab-description {
  padding: 0 16px 16px 52px;
  color: #4b5563;
  display: none;
  user-select: text;
}

.switch-section .tab.active .tab-description {
  display: block;
}

.switch-section #content {
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
  height: fit-content;
}

.switch-section .tab-content {
  display: none;
}

.switch-section .tab-content.active {
  display: block;
}

.switch-section .tab-content h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #2563eb;
  display: flex;
  align-items: center;
  gap: 12px;
}

.switch-section .tab-content h2 img {
  width: 32px;
  height: 32px;
}

.switch-section .tab-content p {
  font-size: 16px;
  color: #374151;
}

.plusone {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 25%;
}
.plusthree {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 35%;
}
.plusfour {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 40%;
}