:root {
--bg1: #f5f8fe;
--bg2: #e5eefd; /*#C8DEFF;*/
--bg3: #150943;
--bg4: #2A0C6E;
--bg5: #38206c;
--bg6: #1c2b4d;
--color1:#444;
--color2:#333;
--degb:360deg;
--degt:180deg;
--degs:90deg;
--dege:-90deg;
--swiper-theme-color:var(--bs-purple);
}

html {
  position: relative;
  min-height: 100%;
	overflow-x: clip;
}
body {
	/*font-family:Poppins;*/
	/*font-family: 'Outfit', sans-serif;*/
	font-family: 'Outfit';
	/* Margin bottom by footer height */
  /*margin-bottom: 460px;*/
	overflow-x: clip;
	margin-top:0px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
	font-size:90%;
	/* Set the fixed height of the footer here */
  /*height: 460px;*/
}


.bg-t{
	background: var(--bg1) !important;
	background: -webkit-linear-gradient(var(--degt), var(--bg1) 0%, var(--bg2) 50%) !important;
	background: -moz-linear-gradient(var(--degt), var(--bg1) 0%, var(--bg2) 50%) !important;
	background: linear-gradient(var(--degt), var(--bg1) 0%, var(--bg2) 50%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--bg1)", endColorstr="var(--bg2)", GradientType=0) !important;
}

.bg-b, #layout_default .col2{
	background: var(--bg1) !important;
	background: -webkit-linear-gradient(var(--degb), var(--bg1) 0%, var(--bg2) 50%) !important;
	background: -moz-linear-gradient(var(--degb), var(--bg1) 0%, var(--bg2) 50%) !important;
	background: linear-gradient(var(--degb), var(--bg1) 0%, var(--bg2) 50%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--bg1)", endColorstr="var(--bg2)", GradientType=0) !important;
}

.bg-s, bodyX, .section-item:nth-child(2n){
	background: var(--bg1) !important;
	background: -webkit-linear-gradient(var(--degs), var(--bg1) 40%, var(--bg2) 100%) !important;
	background: -moz-linear-gradient(var(--degs), var(--bg1) 40%, var(--bg2) 100%) !important;
	background: linear-gradient(var(--degs), var(--bg1) 40%, var(--bg2) 100%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--bg1)", endColorstr="var(--bg2)", GradientType=0) !important;
}
.bg-e, .section-item:nth-child(2n+1){
	background: var(--bg1) !important;
	background: -webkit-linear-gradient(var(--dege), var(--bg1) 0%, var(--bg2) 40%) !important;
	background: -moz-linear-gradient(var(--dege), var(--bg1) 0%, var(--bg2) 40%) !important;
	background: linear-gradient(var(--dege), var(--bg1) 0%, var(--bg2) 40%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--bg1)", endColorstr="var(--bg2)", GradientType=0) !important;
}

.bg-1{background: var(--bg1) !important;}
.bg-2{background: var(--bg2) !important;}
.bg-5, #banner_bawah{background: var(--bg5) !important;}
#banner_bawah img{width:100%;}

#slideHero{background: var(--bg3) !important;}

section {padding-top:1.5rem;padding-bottom:1.5rem;}
header .navbar-brand-ext img{height:40px;}


#features-section{position:relative; margin-bottom:0; padding-bottom:0;}
#features-section .card{background:transparent;margin-bottom:10px;}
#features-section img{width:100%;}
#features-section .card-title{position:absolute;width:100%; left: 50%;transform: translateX(-50%);top:15px; padding:2px 8px;}
#features-section p{position:absolute;width:100%; left: 50%;transform: translateX(-50%);top:142px; padding:2px 8px;}
@media screen and (max-width: 767.98px) {
	#features-section .card-title{top:30px;}
	#features-section p{top:200px;}
}

#subscribe-section{
	padding-top:26rem;
	color:#eee;
	background:var(--bg5);
	background-image: url("../img/front/banner-bawah.jpg?250716");
	background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
}

.channel-lineup .col-12{position:relative;padding-top:5px; padding-bottom:5px;}
.channel-lineup .col-12 .channel-lineup-cat-label{position:absolute;top:33%;}
.channel-lineup .col-12:nth-child(odd){background:var(--bg2);}
.channel-lineup .col-12:nth-child(even){background:var(--bg1);}

/* channel lineup image model 2*/
.channel-lineup .channel-lineup-cat-item:nth-child(odd){background:var(--bg2);}
.channel-lineup .channel-lineup-cat-item:nth-child(even){background:var(--bg1);}


@media screen and (max-width: 767.98px) {
	.channel-lineup .col-12 .channel-lineup-cat-label{font-size:0.62rem;}
}

div.genre-channel div.genre-channel-items:nth-child(even){background:var(--bg1);}
div.genre-channel div.genre-channel-items:nth-child(odd){background:var(--bg2);}


#navbar-header-brand-img{height:50px;}
.navbar-brand-ext{color: var(--bg4);font-weight:bolder;font-size:150%;}

/*DESKTOP*/
@media screen and (min-width: 768px) {
	#slideHero{position:relative; z-index:0 !important;}
	#features-section{
		margin-top:-115px; z-index:2 !important;
		margin-top:-85px; z-index:2 !important;
	}
	.languageSwitcher{position:absolute; top:0px; right:0; padding-right:25px;z-index:2;}
}

/*MOBILE*/
@media screen and (max-width: 767.98px) {
	header .navbar-brand-ext img{height:28px;}
	#slideHero{position:relative; z-index:0 !important;}
	#features-section{margin-top:-3rem; z-index:2 !important;}
	#subscribe-section{padding-top:8rem;}
	#navbar-header-brand-img{height:40px;}
	.languageSwitcher{display:none;}
	.navbar-brand-ext{font-size:110%;margin-left:-1rem;}
}

/*.section-heading{letter-spacing: -.05rem;text-shadow: 1px 1px 2px var(--bg3);}*/
.section-heading{xletter-spacing: -.05rem;text-shadow: 1px 1px 2px var(--bg3);}

#btn-back-to-top {position:fixed; bottom: 20px; right: 20px; display: none; z-index:999999;font-weight:bold;}

header {
  background: rgba(220, 226, 249, 0.85); /*rgba(255, 255, 255, 0.85);*/
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: none;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: all 0.5s ease;
  transform: translateY(0);
}
header.scrolled {
	background: rgba(220, 226, 349, 0.85); /*var(--bs-bg-body-secondary);*/
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
header.hidden {
  transform: translateY(-100%);
}

.container{
	padding-left: calc(var(--bs-gutter-x) * 0.8);
	padding-right: calc(var(--bs-gutter-x) * 0.8);
}

.navbar{box-shadow:0px 1px 15px -2px #c3c3e1;}
.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:visited{border: 0 !important; box-shadow: none !important; color:var(--bs-purple) !important;}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 74, 4)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-collapse{
	max-height:22rem;
}

#nav-socmed-top{font-size: 1.6rem;}
#nav-socmed-bottom{font-size: 1.4rem;}

.features-icon
{
  width: 10rem;
  height: 10rem;
  margin: -35px auto 0;
  /*background: #446BAE38;*/
	background: #4E31913B;
	color:var(--bg3);
	/*color:#446BAE;*/
  border-radius: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: -1;
}

.features-icon i{font-size:4rem;opacity:0.4;}
.features .card-title{font-size:1.1rem;font-weight:bold;}
.features .card-body  p{margin-top:-28px;margin-bottom:0;}

#packages-section{background:var(--bg1);}
/*#packages-section .container{background:var(--bg1);}*/
.bg-dark-1, #packages-section .card, #packages-section .card .card-footer, #Xsubscribe-section{
background: linear-gradient(120deg, var(--bg3), var(--bg4));
color:#eee;
}
.bg-dark-2{
background: linear-gradient(120deg, var(--bg6), var(--bg3));
color:#eee;
}

#id-content-service-contact{background:#eee;}

@media (min-width: 40em) {
  .section-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .section-heading {
    Xmargin-top: 7rem;
  }
}
/*
@media (max-width:767px) {
  .navbar-header {
    display:flex;
  }
}

@media (max-width:767px) {
  .navbar-brand {
    order:1;
  }
}

@media (max-width:767px) {
  .navbar-toggle {
    order:2;
    margin-left:0px;
    xmargin-right:0;
  }
}*/

.features .figure{width:160px; text-align:center; transform: scale(1);transition: all 0.4s ease-in-out;}
.features .figure-caption{font-weight:300;color:var(--bg5);}
.features .figureXX:hover{
	background-color: orange; transform: scale(1.05);
	border:2px solid #3399ff;
}
.features .figure-img{
	transform: scale(1);transition: all 0.4s ease-in-out;
}
.features .figure-img:hover{
	transform: scale(1.2);
}

/*`sm` applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	.features .figure{width:160px;}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.features .figure{width:160px;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.features .figure{width:160px;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.features .figure{width:170px;}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.features .figure{width:160px;}
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
	.features .figure{width:180px;}
}