html.sr .load-hidden {
	visibility: hidden;
}

.large-select2 {
	padding: 1.255em !important;
	border-radius: 20px !important;
	font-size: 1rem !important;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: white;
    background-color: #FF6D0B;
}

#btnScrollTop {
	right: 1.2%;
	margin: 1rem;
	bottom: 15%;
	display: none;
	width: 60px;
	height: 60px;
	/* transition: all 0.3s ease-in-out; */
}

@media (max-width: 768px) {
	#btnScrollTop {
		right: 1.2%;
		bottom: 25%;
		display: none;
		width: 50px;
		height: 50px;
	}
}

.filter-category .nav-link {
	color: #FF6D0B;
	border: 1px solid #FF6D0B;
	border-radius: 2em;
	/* margin: 0 5px; */
}

.filter-category .nav-link.active {
	background-color: #FF6D0B;
	font-weight: 700;
}

.card-promo {
	border-radius: 1em;
	overflow: hidden;
	border: none;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.pagination > .page-numbers {
	padding: 0.5em 1.5em;
	color: #FF6D0B;
}

.pagination a {
	text-decoration: none;
}

.pagination > .page-numbers.current {
	background-color: #FF6D0B;
	color: #fff;
	border-radius: 8px;
	font-weight: 700;
}

.custom-tooltip {
	/* --bs-tooltip-bg: #fff; */
	--bs-tooltip-max-width: 425px;
	--bs-tooltip-text-align: left;
}

@media (max-width: 768px) {
.dropdown-menu.show {
	display: block;
	width: 100%;
	
}
}

@media (min-width: 768px) {
.dropdown-menu.show {
	display: block;
	width: 700px;
}
.dropdown-menu.dropdown-services.show {
	display: block;
	width: 600px !important;
}
.dropdown-menu.dropdown-internet.show {
	display: block;
	width: 350px !important;
}
}




/* style homepage ver 1 */

.promo-home {
	padding-top: 5px;
	padding-bottom: 5px;
}

.promo-sign{
	position: absolute;
	right: 210px;
	top: 350px;
}

.new-promo {
	width: 300px;
	height: 115px;
	background: linear-gradient(98.14deg, #3072EE 0%, #6798F3 100%);
	box-shadow: 0px 4px 15px rgba(190, 190, 190, 0.3);
	border-radius: 44px 0px 0px 44px;
	position: absolute;
	right: 0;
	top: 470px;
	transition: transform 250ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
	cursor: pointer;
}

.promo-pattern{
	background-image: url(../images/illustrations/promo-pattern.png);
	background-size: cover;
}

.promo-illustration{
	position: absolute;
	width: 183px;
	height: 140px;
	right: 190px;
	top: 460px;
	transition: transform 250ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
	animation: tilt 3s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
	cursor: pointer;
}

.promo-text{
	margin-left: 50px;
	margin-top: 7px;
}

@keyframes tilt{
	0%{
		transform: rotate(0deg) scale(1) translateX(0px);
	}

	25% {
		transform: rotate(0deg) scale(1) translateX(0px);
	}

	50% {
		transform: rotate(15deg) scale(1.1) translateX(-30px);
	}

	55% {
		transform: rotate(16deg) scale(1.1) translateX(-30px);
	}

	60% {
		transform: rotate(14deg) scale(1.1) translateX(-30px);
	}

	65% {
		transform: rotate(15deg) scale(1.1) translateX(-30px);
	}

	85% {
		transform: rotate(0deg) scale(1) translateX(0px);
	}

	100% {
		transform: rotate(0deg) scale(1) translateX(0px);
	}	
}

.new-promo:hover~.promo-illustration {
	transform: rotate(15deg) scale(1.1) translateX(-30px);
	animation: 0;
}

.new-promo:hover {
	transform: scale(1.1) translateX(-15px);
}

.promo-illustration:hover {
	transform: rotate(15deg) scale(1.1) translateX(-30px);
	animation: 0;
}

@media (max-width: 780px) {
	.promo-sign {
		display: none;
		right: 80px;
		top: 350px;
	}

	.promo-illustration {
		display: none;
		width: 183px;
		height: 140px;
		right: 190px;
		top: 460px;
	}

	.new-promo {
		display: none;
		width: 300px;
		height: 115px;
		top: 470px;
	}

	.promo-text {
		display: none;
		margin-left: 50px;
	}
}

@media (max-width: 435px) {
	.promo-sign {
		display: none;
		right: 80px;
		top: 350px;
	}

	.promo-illustration {
		display: none;
		width: 85px;
		height: 65px;
		right: 100px;
		top: 460px;
	}

	.new-promo {
		display: none;
		width: 135px;
		height: 77px;
		top: 470px;
	}

	.promo-text {
		display: none;
		margin-left: 30px;
		width: 65%;
	}
}

.promo-link::before {
	content: "";
	display: inline-block;
	animation: promo-link 4s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
	color: black;
}

.promo-link {
	display: inline-block;
	animation: promo-color 4s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
	color: black;
}

@keyframes promo-link {
	0% {
		content: "🎁 ";
		opacity: 0;
		transform: translateX(0px);
	}

	50% {
		content: "🎁 ";
		opacity: 1;
		transform: translateX(4px);
	}

	100% {
		content: "🎁 ";
		opacity: 0;
		transform: translateX(0px);
	}
}

@keyframes promo-color {
	0% {
		color: black;
		opacity: 1;
		transform: translateX(0px);
	}

	50% {
		color: #FF6D0B;
		opacity: 1;
		transform: translateX(4px);
	}

	100% {
		color: black;
		opacity: 1;
		transform: translateX(0px);
	}
}

/* style homepage ver 2 */
.promo-v2{
	width: 660px;
	height: 127px;
	background: linear-gradient(92.12deg, #1EAB84 0%, #0ED09A 100%);
	border-radius: 44px 44px 0px 0px;
	margin: 0 auto;
	margin-top: 85px;
	position: relative;
}

.promo-content{
	padding-top: 4px;
}

.promo-diskon{
	color: white;
	text-align: left;
	padding-right: 16px;
	font-size: 25px;
	align-self: center;
	font-weight: 700;
}

.promo-diskon-2 h1{
	font-size: 64px !important;
	color: #173978;
	-webkit-text-stroke: 2px #FFFFFF;
	font-weight: 700;
	margin-bottom: 0 !important;
	display: flex;
	flex-direction: row;
}

.promo-persen{
	align-self: flex-end;
}

.promo-persen h4{
	font-size: 32px;
	color: #173978;
	-webkit-text-stroke: 1px #FFFFFF;
	font-weight: 700;
	margin-bottom: 0 !important;
}

.promo-gradient{
	width: 100%;
	height: 37px;
	position: absolute;
	bottom: 0;
	background: linear-gradient(180deg, rgba(245, 136, 102, 0) 0%, rgba(255, 255, 255, 0.5) 62.81%, #FFFFFE 100%);
}

.promo-image{
	background-image: url(../images/illustrations/promo-pattern.png);
}

@media (max-width: 920px){
	.promo-v2{
		width: 80%;
	}
}

@media (max-width: 600px) {
	.promo-content{
		padding-top: 20px;
	}
	.promo-diskon-2 h1 {
		font-size: 50px !important;
	}
}

@media (max-width: 430px) {
	.promo-v2 {
		width: 300px;
		height: 55px;
	}

	.promo-diskon h5 {
		padding-right: 4px;
		font-size: 14px !important;
		margin-bottom: 2px;
	}

	.promo-diskon-2 h1, .promo-diskon-2 h4{
		font-size: 22px !important;
		font-weight: bold;
		-webkit-text-stroke: 0.5px #FFFFFF;
		align-self: center;
	}

	.promo-persen{
		align-self: center;
	}

	.promo-content {
		padding-top: 8px;
	}

	.promo-gradient{
		height: 16px;
	}
}

@media (max-width: 350px) {
	.promo-v2{
		width: 100%;
	}
	
}

.ct-navbar__dropdown-container .ct-navbar__dropdown-link, .ct-navbar__dropdown-link {
	color: #212529;
    align-items: center;
    background: 0 0;
    border-radius: 0.75rem;
    display: flex;
    gap: 0.875rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    text-decoration: none;
	margin: 0px 10px 0 10px;
}

.ct-navbar__dropdown-link:hover {
    color: white;
    background-color: #FF6D0B;
    border-radius: 0.75rem;
    padding: 0.75rem;
	margin: 0px 10px 0 10px;
}
	
.ct-navbar__dropdown-content {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 32px 72px rgb(0 87 178 / 16%);
    padding: 1rem;
}	
	
.ct-navbar__icon {
    aspect-ratio: 1/1 auto;
    height: 40px;
    width: 40px;
}


.ct-navbar__content {
    padding-left: 0;
}

.ct-navbar__title {
    display: inline-flex;
    font-weight: 600;
    gap: 0.5rem;
    margin-bottom: 2px;
    white-space: nowrap;
}

.ct-navbar__title {
    font-size: 1rem;
    letter-spacing: .02rem;
    line-height: 1.5rem;
}

.ct-navbar__description {
    max-width: 300px;
    white-space: normal;
}

/* style domain sesuai figma */
.domain-berbeda{
	font-weight: 400;
	font-size: 16px;
	margin-right: 28px;
}

.input-domain-berbeda{
	padding: 20px 0px 20px 20px !important;
	border-radius: 8px;
}

.btn-domain-berbeda{
	padding: 10px;
	background: #FF6D0B;
	border-radius: 32px;
	color: white;
	font-weight: 700;
	font-size: 18px;
	margin-top: 8px;
}

.btn-domain-berbeda:hover{
	background-color: #ec5e00;
	color: white;
}

.load{
	animation: rotate 2s infinite;
}

@keyframes rotate {

	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

#pesan-banyak-domain{
	padding: 50px 7rem;
}

@media (max-width: 990px) {
	#pesan-banyak-domain {
		padding: 50px 0rem;
	}
}