/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Sep 09 2025 | 17:07:16 */
h2 {
	text-align: center;
	margin-bottom: 8px;
}

a {
	font-family: Montserrat, Helvetica, Arial;
}

p {
	font-family: Montserrat, Helvetica, Arial;
	margin-bottom: 8px;
	font-weight: 500;
	font-size: 14px
}

li.card {
  padding: 40px 40px;
}

#staron {
  background-color: #fff;
  border: solid 1px;
  border-color: #ccc;	
}

.show {
  display: block;
}

#myBtnContainer{
    top: 7px;
    left: auto;
    height: 72px;
    display: flex;
    justify-content: center;
}

#mybtnmnu{
	display: inline-block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 14px;
  font-size:10px;	
  background-color:#3b618e;
  color:#fffff;
  cursor: pointer;
}

.btn:hover {
  background-color: #3b618eed;
  color: #96d6d5;
}

.btn.active {
  background-color: #243559;
  color: #96d6d5;
}


.star {
    visibility:hidden;
    font-size:46px;
    cursor:pointer;
	color:gold;
}

.star:before {
   content: "\2605";
   visibility:visible;
}

.star:checked:before {
   content: "\2606";
}


* { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
	font-family: 'Times New Roman', Times, serif; 
} 


.wrapper { 
	max-width: 1100px; 
	width: 100%; 
	position: relative; 
    margin: auto;
} 

.wrapper i { 
	height: 50px; 
	width: 50px; 
	background: #54a2b9; 
	text-align: center; 
	line-height: 50px; 
	border-radius: 50%; 
	cursor: pointer; 
	position: absolute; 
	top: 50%; 
	font-size: 1.25 rem; 
	transform: translateY(-50%); 
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23); 
} 

.wrapper i:first-child { 
	left: -14px; 
	z-index:10;
} 

.wrapper i:last-child { 
	right: -22px;
} 

.wrapper .carousel { 
	display: grid; 
	grid-auto-flow: column; 
	grid-auto-columns: calc((100% / 3) - 12px); 
	gap: 16px; 
	overflow-x: auto; 
	scroll-snap-type: x mandatory; 
	scroll-behavior: smooth; 
	scrollbar-width: 0;
	height: 400px; 
} 

.carousel::-webkit-scrollbar { 
	display: none; 
} 

.carousel :where(.card, .img) { 
	display: flex; 
	align-items: center; 
	justify-content: center; 
} 

.carousel.dragging { 
	scroll-snap-type: none; 
	scroll-behavior: auto; 
} 

.carousel.no-transition { 
	scroll-behavior: auto; 
} 

.carousel.dragging .card { 
	cursor: grab; 
	user-select: none; 
} 

.carousel .card { 
	scroll-snap-align: start; 
	height: 400px; 
	list-style: none; 
	background: #f1f1f1; 
	border-radius: 8px; 
	display: flex; 
	cursor: pointer; 
	width: 98%; 
	padding-bottom: 15px; 
	align-items: center; 
	justify-content: center; 
	flex-direction: column; 
} 

.card h2 { 
	font-weight: 600; 
	font-size: 1.56rem; 
	margin: 30px 0 5px;
} 

.card span { 
	color: #232426; 
	font-size: 2.31rem;
	text-align: center;
} 



@media screen and (max-width: 900px) { 
	.wrapper .carousel { 
		grid-auto-columns: calc((100% / 2) - 9px); 

	} 
} 

@media screen and (max-width: 600px) { 
	.wrapper .carousel { 
		grid-auto-columns: 100%; 

	} 
}

