@font-face {
	font-family: 'Fredoka';
	src: url('../css/fonts/FredokaOne-Regular.ttf') format('truetype');
}

.container {
	max-width: 1376px !important;
}

@media (max-width: 480px) {
	#features-holder {
		gap: 32px !important;
	}
}

.dot {
	background-color: #0000002a;
}

	.dot.active {
		background-color: #f5aa22;
	}

.botton-color-priceDone {
	cursor: pointer;
	padding-top: 12px;
	padding-right: 32px;
	padding-bottom: 12px;
	padding-left: 32px;
	gap: 10px;
	border-radius: 12px;
	background: #70CE67;
	box-shadow: 0px 6px 0px 0px #4D9646;
	color: white;
}

	.botton-color-priceDone:hover {
		background-color: #5FAF57;
		padding-top: 12px;
		padding-right: 32px;
		padding-bottom: 12px;
		padding-left: 32px;
		gap: 10px;
		border-radius: 12px;
		box-shadow: 0px 6px 0px 0px #87D181;
		color: white;
	}

/* Target all radio buttons inside your modals */
#first-modal input[type="radio"],
#second-modal input[type="radio"] {
	/* Remove the default circular browser styling */
	-webkit-appearance: none;
	appearance: none;
	/* Set exact dimensions */
	width: 20px;
	height: 20px;
	/* Create the rounded square from Figma */
	border-radius: 6px;
	background-color: #F1F3F5; /* Light gray background */
	/* Center the checkmark inside */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	margin: 0;
	border: none;
	transition: background-color 0.2s ease-in-out;
}

	/* Change background to orange when selected */
	#first-modal input[type="radio"]:checked,
	#second-modal input[type="radio"]:checked {
		background-color: #f5aa22;
	}

	/* Draw the custom white checkmark */
	#first-modal input[type="radio"]::after,
	#second-modal input[type="radio"]::after {
		content: '';
		width: 11px;
		height: 6px;
		border-left: 2.5px solid white;
		border-bottom: 2.5px solid white;
		/* Rotate to look like a checkmark and position slightly up */
		transform: rotate(-45deg) translate(1px, -1px);
		opacity: 0; /* Hidden by default */
		transition: opacity 0.2s ease-in-out;
	}

	/* Show the checkmark when selected */
	#first-modal input[type="radio"]:checked::after,
	#second-modal input[type="radio"]:checked::after {
		opacity: 1;
	}

/* Custom Scrollbar for the Dropdown Menu */
.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: transparent;
	margin: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background: #9ca3af; /* Gray-400 */
	border-radius: 10px;
}

	.custom-scrollbar::-webkit-scrollbar-thumb:hover {
		background: #6b7280; /* Gray-500 */
	}

.font-100 {
	font-weight: 700;
}

.font-200 {
	font-weight: 700;
}

.font-300 {
	font-weight: 700;
}

.font-400 {
	font-weight: 700;
}

.font-500 {
	font-weight: 700;
}

.font-600 {
	font-weight: 700;
}

.font-700 {
	font-weight: 700;
}

.font-800 {
	font-weight: 700;
}

.font-900 {
	font-weight: 700;
}

.fs-18 {
	font-size: 18px;
}

.fs-64 {
	font-size: 64px;
}

.fs-20 {
	font-size: 20px;
}

.fs-32 {
	font-size: 32px;
}

body {
	background-color: white;
	font-family: 'Fredoka', serif;
	cursor: default;
}

.body-font {
	font-family: 'Outfit';
	font-weight: 400; /* Regular qalinlik */
}

p {
	font-family: 'outfit';
}

button {
	font-family: 'outfit';
}

.feature-card-shadow {
	box-shadow: 0px 8px 52px 0px rgba(4, 11, 41, 0.19);
}

#combined-experts-section2 {
	margin-top: 158px;
}

#combined-experts-section1 {
	padding-bottom: 55px !important;
	padding-top: 14rem !important;
	margin-top: 33px;
}

.font-medium {
	font-weight: 500;
}

.our-community-section {
	p {
		font-family: 'Fredoka', serif !important
	}
}

.pt-110 {
	padding-top: 100px;
}

#testimonial-slider::-webkit-scrollbar {
	display: none;
}

@media (max-width: 480px) {
	.text-align-left-mobile {
		text-align: left;
	}

	.mb-n25-mobile {
		margin-bottom: -25px;
	}

	.pb-0-mobile {
		padding-bottom: 0;
	}

	.pb-30-mobile {
		padding-bottom: 30px;
	}

	.stars1 {
		& > :nth-child(3) {
			position: absolute;
			top: 40%;
			left: 4px;
			transform: translateY(-50%);
			width: 34px;
			height: auto;
			display: block;
		}

		& > :nth-child(5) {
			left: 322px;
			position: absolute;
			top: 57%;
			transform: translateY(-50%);
			width: 34px;
			height: auto;
		}

		& > :nth-child(6) {
			position: absolute;
			top: 68%;
			right: 3px;
			width: 34px;
			height: auto;
			transform: scale(0.5);
		}
	}

	#combined-experts-section1 {
		padding-bottom: 0px !important;
		padding-top: 15rem !important;
		margin-top: -140px;
		background-image: url('../image/svg/price_liveClass-Mobile.svg') !important;
		background-size: unset !important;
		background-position-y: 180px !important;
	}

	#combined-experts-section2 {
		background-image: url('../image/svg/liveClass_guarantee.svg') !important;
		background-size: unset !important;
		background-position-y: 180px !important;
		margin-top: -147px !important;
		padding-top: 305px !important;
		padding-bottom: 8rem !important;
	}

	#combined-experts-section2 {
		margin-top: -60px;
	}

	#priceHolder {

		div {
			margin-block-end: unset;
		}
	}

	#freeAccessID {
		padding-block: 25px !important;

		h2 {
			margin-top: 11% !important;
		}
	}

	.anytime-anywhere-section h2 {
		font-size: 44px !important;
		margin-bottom: 24px;
	}
}