body {
			font-family: 'Montserrat', sans-serif !important;
			background-color: #ffffff !important;
		}
		.header-area{
			height:72px !important;
		}
		.btn {
			font-family: 'Montserrat', sans-serif !important;
			font-weight: 400 !important;
		}

		.btn-arrow {
			position: relative;
			transition: background-color 300ms ease-out;
			padding-left: 32px !important;
			padding-right: 32px !important;  
			padding-top: 8.5px;
			padding-bottom: 8.5px;
		}
		.bg-arrow-light{	
			background-color:#fff;
		}
		.bg-arrow-light:hover{	
			background-color:#fff;
		}
		.btn-arrow span {
			display: inline-block;
			position: relative;
			transition: all 300ms ease-out;
			will-change: transform;
		}

		.btn-arrow:hover span {
			transform: translate3d(-1rem, 0, 0);
		}
		.bo-purple-dark{
			border:solid 1px #462E65 !important;
		}
		.btn-arrow .fas {
			position: absolute;
			width: 1.1em;
			right: 0rem; 
			opacity: 0;
			top: 50%;
			transform: translateY(-50%);
			transition: all 300ms ease-out;
			will-change: right, opacity;
		}

		.btn-arrow .fas * {
			stroke-width: 5;
			stroke-color: transparent; 
		}

		.btn-arrow:hover .fas {
			opacity: 1 !important;
			right: -2rem !important;
		}
		.btn-hero-purple{
			padding-top: 14.5px !important;
			padding-bottom: 14.5px !important;
			font-size:600;
		}
		.btn-hero-light{
			padding-top: 14.5px !important;
			padding-bottom: 14.5px !important;
			font-size:600;
		}
		.btn-hero-purple:hover{
			padding-left:38px !important;
			padding-right:38px !important;
			transition: all 300ms ease-out;
		}
		.btn-hero-light:hover{
			padding-left:38px !important;
			padding-right:38px !important;
			transition: all 300ms ease-out;
		}
		.bg-purple{
			background-color:#9675c2 !important;
		}
		.bg-purple:hover{
			background-color:#9675c2 !important;
			border:solid 1px #9675c2 !important;
		}
		.hov-shadow-purple:hover{
			box-shadow: 0 0 20px #9675c2 !important;
		}
		.ho-text-purple:hover{
			color:#9675c2 !important;
		}

		h1, h2, h3,h4,h5,h6 {
			font-family: 'Noto Serif', serif !important;
		}
		#white-page body {
			background-color: #fff !important;
		}

		p {
			color: #747794;
		}

		#mainNav .navbar-nav .nav-item .nav-link {
			color: #6c757d;
		}

		.page-section {
			padding: 2rem 0;
		}
		::-webkit-scrollbar {
			width: 10px;
		}

		::-webkit-scrollbar-track {
			box-shadow: inset 0 0 5px grey;
			border-radius: 10px;
		}
		::-webkit-scrollbar-thumb {
			background: linear-gradient(to left, #9675c2, #9675c2);
			border-radius: 10px;
		}
		::-webkit-scrollbar-thumb:hover {
			background: linear-gradient(to left, #9675c2, #9675c2);
		}

		.desc-header{
			font-weight:500;
			font-size: 18px;
		}

		hr.divider {
			height: 0.2rem;
			max-width: 3.25rem;
			margin: 1.5rem auto;
			background-color: #a589cb;
			opacity: 1;
		}

		hr.divider-white {
			height: 0.2rem;
			max-width: 3.25rem;
			margin: 1.5rem auto;
			background-color: white;
			opacity: 1;
		}

		#portfolio .container-fluid .portfolio-box .portfolio-box-caption,
		#portfolio .container-sm .portfolio-box .portfolio-box-caption,
		#portfolio .container-md .portfolio-box .portfolio-box-caption,
		#portfolio .container-lg .portfolio-box .portfolio-box-caption,
		#portfolio .container-xl .portfolio-box .portfolio-box-caption,
		#portfolio .container-xxl .portfolio-box .portfolio-box-caption {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 100%;
			height: 100%;
			position: absolute;
			bottom: 0;
			text-align: center;
			opacity: 0;
			color: #fff;
			background: rgb(150 117 194 / 79%);
			transition: opacity 0.25s ease;
			text-align: center;
		}

		.btn:disabled,
		.btn.disabled,
		fieldset:disabled .btn {
			color: var(--bs-btn-disabled-color);
			pointer-events: none;
			background-color: #9675c2;
			border-color: var(--bs-btn-disabled-border-color);
			opacity: var(--bs-btn-disabled-opacity);
		}

		.bg-ungu {
			background-color: #9675c2;
		}

		#mainNav .navbar-nav .nav-item .nav-link.active {
			color: #8d65c3 !important;
		}

		#mainNav .navbar-nav .nav-item .nav-link:hover {
			color: #8d65c3 !important;
		}

		.link-fitur {
			text-decoration: none;
		}
		@keyframes typing {
			from {
				width: 0
			}

			to {
				width: 100%
			}
		}

		.slick-slide {
			margin: 0px 20px;
		}

		.slick-slide img {
			width: 100%;
		}

		.slick-prev:before,
		.slick-next:before {
			color: black;
		}

		.slick-slide {
			transition: all ease-in-out .3s;
			opacity: .2;
		}

		.slick-active {
			opacity: .5;
		}

		.slick-current {
			opacity: 1;
		}

		.owl-next,
		.owl-prev {
			color: white !important;
		}

		.top-search-form form button{
			right:10px !important;
			left: auto !important;
		}
		.header-top-tinlit{
			background-color:#f4f4f4 !important;
		}
		.nav-secondary{
			padding:10px;
			background-color:#fff;
		}
		.nav-secondary-list a{
			color:#000 !important;
			font-weight: 400 !important;
			font-size:14px !important;
		}
		.masthead{
			background-size:cover !important;
			background-repeat:no-repeat !important;
			margin-top: 90px;
			padding-top: 90px !important;
		}
		.desc-header{
			font-weight:300;
			font-size: 18px;
			padding-bottom:35px;
		}
		.btn-light{
			color:#9573C2 !important;
		}
		.text-show-more{
			font-size:14px;
			font-weight:500;
		}

		.book-carousels {
			position: relative;
			display: flex;
			justify-content: center;
			gap: 20px;
			margin-top: 60px;
			flex-wrap: nowrap;
			padding-bottom: 30px;
		}

		.book-item {
			height: 296px !important;
			width: 222px !important;
			scroll-snap-align: center;
			transition: transform 0.3s ease;
			border-radius: 5px;
			transform-origin: bottom center;
		}
		.book-carousels .slick-slide
		{
			opacity:1 !important;
		}

		.section1-body{
			background-size:cover !important;
			background-repeat:no-repeat !important;
			background-position:center;
			-webkit-background-origin:border;
		}
		.section1-counter{
			padding-top:20px;
			padding-bottom:20px;
		}
		.section1-category{
			padding-bottom:60px;
		}
		.section1-body{
			padding-top:60px !important;
			padding-bottom:20px !important;
		}
		.color-purple{
			color:#9675c2 !important;

		}
		.bo-purple{
			border:1px solid #9675c2 !important;
		}
		.text-counter h3{
			font-size:53px;
			padding-bottom: 0px !important;
			font-weight:700;
		}
		.text-counter p{
			font-size:15px;
			color:#212121;
			font-weight:400;
		}
		.section1 .section-title h2{
			font-size:32px;
			font-weight:700;
		}
		.section1 .section-title p{
			font-size:16px;
			color:#212121;
			font-weight:400;
		}
		.catagory-card{
			box-shadow: 0px 4px 8px 0px #0000001F !important;

		}
		.catagory-card:hover{
			background-color:#fff !important;
		}
		.catagory-card .card-body a span{
			color:#212121 !important;	
			font-weight:400 !important;
		}
		.catagory-card a span:hover{
			color:#9b59b6 !important;	
		}
		.story-hits{
			background-color:#fff;
		}
		.story-hits h2 .text-purple {
			color: #9b59b6;
		}
		.slider-story .slick-list{
			padding-bottom:20px;
			padding-top:20px;
		}
		.slider-story .card {
			min-height: 320px !important;
		}

		.slider-story .card .story-title {
			font-size:14px;
			font-weight:700;
			color:#212121;
		}

		.slider-story .card .story-category{
			padding-top:12px;
			padding-bottom:4px;
		}

		.slider-story .card .story-category a{
			font-weight:400;
			font-size:14px;
			color:#9573C2 !important;
		}

		.slider-story img {
			object-fit: cover;
			max-height: 206px;
			height: auto;
			width: 100%;
		}

		.slider-story .slick-slide{
			margin: 0 5px !important;
		}

		.slider-story .slick-slide {
			padding: 0 3px;
		}

		.slider-story .card {
			height: 100%;
		}
		.slider-story .slick-active{
			opacity:1 !important;
		}
		.slider-published .slick-list{
			padding-bottom:20px;
			padding-top:20px;
		}
		.slider-published .slick-active{
			opacity:1 !important;
		}
		.section-published .card {
			transition: 0.3s ease;
		}
		.section-published .card:hover {
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
		}
		.send-count-container{
			display:flex;
			gap:3rem;
		}
		.send-count-text h4{
			font-size:52px;
			font-weight:700;
		}
		.send-count-text p{
			font-size:14px;
			font-weight:400;
			color:#212121;
		}
		.send-subtitle{
			font-size:14px;
			font-weight:400;
			color:#212121;
		}

		.offside-card {
			margin-top: -100px;
			border-radius: 20px;
			overflow: hidden;
			position: relative;
		}

		.circle-decor {
			width: 80px;
			height: 80px;
			background-color: #FFC107; 
			border-radius: 50%;
			position: absolute;
			z-index: 1;
		}

		.circle-decor.top-left {
			top: 0;
			left: 0;
			transform: translate(-40%, -40%);
		}

		.circle-decor.bottom-right {
			bottom: 0;
			right: 0;
			transform: translate(40%, 40%);
		}

		.illustration-wallet {
			max-width: 320px;
		}

		.illustration-pen {
			max-width: 200px;
			position: absolute;
			top: -30px;
			right: -30px;
			z-index: 2;
		}

		.bg-gradient-purple {
			background: linear-gradient(135deg, #502C94, #703BB4);
		}

		.earn-story{
			background: linear-gradient(180deg, rgba(255, 255, 255, 1) 20%, rgba(244, 233, 255, 1) 100%) !important;
			margin-bottom:70px;
		}
		.earn-story-desc h5{
			font-size:32px;
			font-weight:700;
		}
		.earn-story-desc h2{
			font-size:32px;
			font-weight:700;
		}
		.earn-story-desc p{
			font-size:16px;
			font-weight:400;
			color:#212121;
			margin-top:22px;
			margin-bottom:20px;
		}
		.earn-story-desc h3{
			font-size:52px;
			font-weight:700;
		}
		.earn-story-p{
			font-size:14px !important;
			font-weight:400 !important;
			color:#212121 !important;
			padding-bottom:22px !important;
			margin-top:0px !important;
		}
		.earn-story-body{
			margin-bottom:190px;
			padding-bottom:0px;
			padding-top:30px;
		}
		.event-story h3{
			font-size:32px;
			font-weight:600;
			margin-bottom:25px;
		}
		.event-story h6{
			font-size:18px;
			font-weight:700;
			margin-bottom:22px;
			font-family: 'Montserrat', sans-serif !important;
		}
		.event-story p{
			font-size:16px;
			font-weight:300;
		}
		.event-story h2{
			font-size:52px;
			font-weight:700;
		}
		.slider-partner{
			padding-bottom:30px;
		}
		.slider-partner img {
			width: 100px;
			height: 100px;
			object-fit: contain;
			filter: grayscale(100%);
			transition: 0.3s ease;
			margin: auto;
		}
		.slider-partner .slick-active{
			opacity:1 !important;
		}
		.slider-partner img:hover {
			filter: grayscale(0%);
		}
		.slider-partner p {
			font-size:12px;
			font-weight:400;
			margin-top:12px;
		}
		.footer-contact-section {
			background-size: cover;
			background-position: center;
			color: white;
			padding: 60px 0 0;
		}

		.footer-content {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 60px;
			flex-wrap: wrap;
			text-align: left;
		}

		.footer-left img {
			width: 280px;
			max-width: 100%;
		}
		.footer-right{
			margin-left: 3rem;
		}

		.footer-right h2 {
			font-size: 32px;
			font-weight: 700;
			margin-bottom: 20px;
		}

		.footer-right p {
			font-size: 16px;
			margin-bottom: 10px;
			font-weight:400 !important;
		}
		.footer-right p span{
			font-weight:700 !important;
		}

		.footer-right i {
			margin-right: 10px;
			color: white;
		}

		.footer-bottom {
			background-color: #000;
			color: white;
			text-align: center;
			padding: 15px 0;
			font-size: 12px;
			margin-top: 40px;
		}
		.partner-title{
			padding-top:50px;
			padding-bottom:50px;
		}
		.flag-icon {
			width: 24px;
			height: 24px;
			border-radius: 50%;
			object-fit: cover;
		}
		.dropdown-toggle::after {
			display: none;
		}
		.lang-toggle {
			display: flex;
			align-items: center;
			gap: 8px;
		}
		.dropdown-menu img {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			object-fit: cover;
			margin-right: 8px;
		}
		.contest-section {
			background: #f9f5ff; 
		}
		.contest-body{
			padding-top:110px;
		}
		.contest-body h2{
			font-size:40px;
		}
		.contest-body p{
			padding-top:25px;
			font-size:16px;
			color:#212121;
			font-weight:300;
		}
		.reader-ch{
			font-size:12px;
			color:#72C2B4;
		}
		.creator-winner{
			font-size:14px;
			color:#9573C2;
		}
		.creator-title{
			font-size:16px !important;
			font-weight:700;
		}

		.badge-kata {
			display: inline-block;
			background-color: #7ACCC8;
			color: white;
			padding: 6px 16px;
			border-radius: 999px;
			font-weight: 500;
			font-size: 12px;
		}

		.progress-wrapper {
			height: 32px;
			background-color: #D8CBE8;
			position: relative;
		}

		.progress-bar-kata {
			background-color: #AB84D1;
			height: 100%;
		}

		.progress-label {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 12px;
			font-weight:700 !important;
			text-wrap: nowrap;
		}
		.card{
			box-shadow: 0px 4px 12px 0px #9573C233 !important;
		}

		.pagination-custom .page-item {
			margin: 0 14px;
		}

		.pagination-custom .page-link {
			border: none;
			background: transparent;
			color: #9D84BA;
			font-weight: 400;
			font-size: 18px;
		}

		.pagination-custom .page-item.active .page-link {
			color: #9573C2;
			font-weight: 700;
		}

		.pagination-custom .page-item.disabled .page-link {
			color: #cccccc;
			pointer-events: none;
		}

		.pagination-custom .page-link:hover {
			color: #7a5fb2;
			text-decoration: none;
		}
		.centered {
			display: flex;
			justify-content: center;
		}
		.hero-title{
			font-size:52px !important;
			font-weight:700;
		}

		.slider-story-img
		{
			max-height:278px !important;
			height:auto !important;
		}
		.story-img
		{
			max-height:228px !important;
			height:228px !important;
		}
		.story-title {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.slider-published h5 {
			font-family: 'Montserrat', sans-serif !important;
			font-size:16px;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		@media only screen and (min-width: 1200px) {
			.top-search-form form .form-control {
				max-width: 610px !important;
				width: 610px !important;
			}
		}
		@media (max-width: 576px) {
			.contest-body{
				padding-top:60px;
			}
			.contest-body h2{
				font-size:30px;
			}
			.text-counter h3{
				font-size:38px;
			}

			.send-count-container{
				gap:0rem;
			}
			.masthead{
				margin-top:30px;
			}
			.slider-story .slick-list {
				padding-bottom: 20px !important;
				padding-top: 20px !important;
			}
			.book-item{
				height:392px;
			}

			.hero-title{
				font-size:36px !important;
				font-weight:700;
			}
			.desc-header{
				padding-bottom:2px;
			}
			.book-carousels{
				margin-top:20px;
			}
			.slider-story .card-body{
				padding:8px !important;
			}
			.story-regis .card-body{
				padding:8px !important;
			}
			.story-hits-heading h2{
				font-size:24px;
			}
			.publish-title h2{
				font-size:24px;
			}
			.slider-published .slick-slide{
				margin:0px 10px !important;
			}
			.contest-winner .card-body{
				padding:8px !important;
			}
			.contest img{
				min-height:228px !important;
				height:auto !important;
			}
			.earn-story-desc h5{
				font-size:28px;
			}
			.earn-story-desc h2{
				font-size:28px;
			}
			.event-story h3{
				font-size:28px;
			}
			.partner-title{
				font-size:28px;
			}
			.footer-right h2 {
				font-size: 28px;
			}
			.footer-content {
				display: block;
			}
			.footer-right{
				margin-left: 1rem;
				margin-top: 3.5rem;
			}
			.footer-left img {
				width: 100%;
				max-width: 100%;
			}
			.progress-label{
				font-size:11px;
			}
			.slider-story .slick-slide{
				opacity:1;
			}
			.earn-story-body{
				padding-bottom:40px;
			}

		}
		@media (min-width: 992px) {
			header.masthead {
				height: auto !important;
				min-height: auto !important;
			}
		}