/*awal tab informasi*/
.tabs-container {
		width: 100%;
		height: auto; /* Make the height flexible */
		background-color: white;
		border-radius: 20px;
		box-shadow: 0 20px 40px 20px rgba(0, 0, 0, 0.15);
		overflow: hidden;
		position: relative;
	}

	.tabs {
	padding: 10px 20px 15px 20px; /* Increased padding */
	}

	.tab-links {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #f0f0f0;
	}

	.tab-link {
		background: none;
		border: none;
		font-size: 16px;
		font-weight: 500;
		padding: 15px 30px; /* Increased padding for spacing */
		color: #ccc;
		cursor: pointer;
		position: relative;
		transition: color 0.3s ease;
	}

	.tab-link.active,
	.tab-link:hover {
		color: #047ac9; /* Gradient purple */
	}

	.tab-link i {
		margin-right: 10px;
	}

	.tab-link::after {
		content: "";
		position: absolute;
		width: 0;
		height: 3px;
		bottom: -1px;
		left: 50%;
		background: linear-gradient(45deg, #2c67f2, #62cff4); /* Blue Sky Gradient */
		transition: all 0.4s ease;
	}

	.tab-link.active::after {
		width: 100%;
		left: 0;
	}

	.tab-content {
		display: none;
		animation: fadeInUp 0.5s ease;
		padding: 5px 10px 15px 10px;
	}

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

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

/* Buttons */
.cta-btn {
  display: inline-block;
  padding: 12px 25px; /* More padding */
  background: linear-gradient(45deg, #2c67f2, #62cff4); /* Purple gradient */
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.4s ease;
  font-weight: 500;
  margin-top: 20px;
}

.cta-btn:hover {
  background: linear-gradient(
    45deg,
    #62cff4,
    #2c67f2
  ); /* Darker gradient on hover */
}

/* Responsive Design */
@media screen and (max-width: 600px) {
  .tab-links {
    flex-direction: column;
    align-items: center;
  }

  .tab-link {
    text-align: center;
    width: 100%;
    padding: 15px 0;
  }
}
/*akhir tab informasi*/