@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Knewave&family=Montserrat+Alternates:wght@400;500&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Inter", sans-serif;
}

.body1	{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: linear-gradient(#ECEFFE,#CED6FB);
}

.body2	{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: rgba(26, 188, 156, 0.25);
}

.swiper-wrapper {
	padding: 5px;
}

.card-wrapper {
	max-width: 1100px;
	margin: 0 60px 35px;
	padding: 20px 10px;
	overflow: hidden;
}

.card-list .card-item {
	list-style: none;
}

.card-list .card-item .card-link {
	user-select: none;
	height: 465px;
	display: block;
	background: #fff;
	padding: 18px;
	border-radius: 12px;
	text-decoration: none;
	border: 2px solid transparent;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
	transition: 0.2s ease;
}


.card-list .card-item .card-link:active {
cursor: grabbing;
}

.card-list .card-item .card-link:hover {
	border-color: #1a7b32;
}

.card-list .card-link .card-image {
	width: 100%;
	aspect-ratio: 15 / 9;
	object-fit: cover;
	border-radius: 10px;
}

.card-list .card-link .badge {
	color: #5372fo;
	padding: 8px 16px;
	font-size: 0.95rem;
	font-weight: 500;
	margin: 16px 0 18px;
	background: #000000;
	width: fit-content;
	border-radius: 50px;
}

.card-list .card-link .card-title {
	font-size: 1.19rem;
	color: #000;
	font-weight: 600;
	text-align: justify;
}

.card-list .card-link .card-button {
	height: 35px;
	width: 35px;
	color: #1fa4b6;
	border-radius: 50%;
	margin: 30px 0 5px;
	background: none;
	cursor: pointer;
	border: 2 solid #5372F0;
	transform: rotate(-45deg);
	transition: 0.4s ease;
}

.card-list .card-link:hover .card-button {
	color: #1fa4b6;
	background: #179b13;
}

.card-list .card-link .card-button:hover {
	color: #7d1313;
}

.card-wrapper .swiper-pagination-bullet {
	height: 13px;
	width: 13px;
	opacity: 0.5;
	background: #179b13;
}

.card-wrapper .swiper-pagination-bullet-active {
	opacity: 1;
}

.card-wrapper .swiper-slide-button {
	color: #179b13;
	margin-top: -35px;
}

@media screen and (max-width: 768px) {
	.card-wrapper{
		margin: 0 10px 25px;
	}
	.card-wrapper .swiper-slide-button {
		display: none;
	}
}



/*visimisi*/
.visi	{
	align-items: center;
	justify-content: center;
	background: linear-gradient(#86d98d, #CED6FB);
	font-family: "Montserrat Alternates", sans-serif;
	font-style: normal;
	font-weight: bold;

}


.button1{
	display: grid; 
  	place-items: center;
  	font-family: "Montserrat Alternates", sans-serif;

}

.btn1 {
	padding: 5px 5px 5px;
  background: #1abc9c;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  display: flex;

}

.vertical-center {
 padding: 10px 20px;
}

.btn1:hover {
  background: lightgreen;
  padding: 7px 7px 7px;
   color: black;
}

.guru{
    border-radius: 40px;
    background-color: #ffffff;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: relative;
    margin: auto;
    margin-top: -80px;
}

.guru .col{
	user-select: none;
	display: block;
	background: #fff;
	padding: 18px;
	border-radius: 12px;
	text-decoration: none;
	border: 2px solid transparent;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
	transition: 0.2s ease;
}

.buttong{
	display: block;
	margin-left:auto;
	margin-right: auto;
  	font-family: "Montserrat Alternates", sans-serif;

}