body {
	 font-family:'nunito';
	 background:#000000;
}

section {padding:16vh 0;}

/* class */
.judul {
	font-family:montserrat;
	line-height:1.1;
	font-size:3.5vw;
	font-weight:700;
	color:#ffffff;
}
.subjudul {
	background-color:yellow;
	color:#000000;
	padding:10px;
	font-family:montserrat;
}
.row {margin:auto;}
.container-fluid {padding-left:0;padding-right:0;}

.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.grow:hover {transition:0.5s;transform: scale(1.05);}

#grow {
  overflow: hidden;            /* clip the excess when child gets bigger than parent */
	border-radius:0.5em;
	border:3px solid #ffffff20;
	box-shadow:0px 0px 10px #00000030;
}
#grow img {
  display: block;
  transition: transform .4s;   /* smoother zoom */
  
}
#grow:hover img {
  transform: scale(1.15);
  transform-origin: 50% 50%;
}

.timer {
    text-align: center;
    font-size: 16pt;
    font-family: montserrat;
    display: block;
    font-weight: 700;
    line-height: 18pt;
	color:#ffffff;
}

.timer2 {
    text-align: center;
    padding: 10px 5px;
    background-color: #03181f;
    color: #A8DADC;
    border-radius: 5px;
    font-size: 10pt;
    font-family: montserrat;
    display: block;
    box-shadow: inset 0 0 10px #00000010;
}

.vidisplay {
	width:100%;
	border-radius:0.5em;
	box-shadow:0px 0px 10px #00000030;
}

.play-btn {
	width:7vw;
	opacity: 0.8;
	box-shadow: 0px 0px 10px #00000050;
	border-radius: 100%;
	padding:0;
}
.dancing-script {
	font-family:'dancing script';
}
@media screen and (max-width: 480px) {
	.play-btn {width:24vw;}
}
.play-btn:hover {
	transition:0.5s;
	opacity: 1;
    box-shadow: 0px 0px 60px #000000;
}

.judul-video {
	color: #ffffff;
    background: linear-gradient(to bottom right, #ff0018 0%, #740101 100%);
    padding: 0 10px;
    border-radius: 5px;
	margin-left:1rem;
}
	
/* id */

#header {
	padding-top:60px;
	background-color: #0069c5;
	background-image:url(../img/bg.png);
	background-size:cover;
}

#header ul {
	list-style-image: url(../img/arrow.png);
	margin-bottom:0;
}
#header li {
	font-size:1.2vw;
	padding-bottom:0.5em;
	padding-top:0.5em;
	font-family:'montserrat';
}

#subheader {
	font-family:'open sans';
	text-align:center;
	background-color:#dedede;
	padding:100px 0;
}

#subheader h4 {
	font-family:anton;
	background-image:url(../img/bgli.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	padding:10px 0;
}


#testimoni {
	background-color:#0069c5;
}
#testimoni h1 {
	font-family:montserrat;
	color:#dedede;
}
#testimoni p {
	color:#193955;
	border-radius:5px;
	background-color:#dedede;
	box-shadow: 0px 0 10px 0px #024580;
}
#testimoni .name {
	color:#28a745;
	font-family:montserrat;
	font-weight:700;
	font-size:10pt;
	font-style:italic;
}
#testimoni .col-2 img {
	border:2px solid #dedede;
	border-radius:40px;
}
#testimoni .col-2 img:hover {
	transform: scale(1.15);
	transition: transform .5s;
}

#preface {
	background-color:#dedede;
}
#preface1 h1 {
	font-weight:700;
	font-family:'poppins';
	color:#2a4f7c;
}
#preface1 b {
	background-color:yellow;
}
#preface2 {
	margin-top:100px;
}

#preface2 h1 {
	font-weight:700;
	font-family:'poppins';
	color:#2a4f7c;
}

#preface3 {
	margin-top:100px;
}
#preface3 td {
	padding:10px;
	background-color:#0069c5;
	color:#fff;
	border: 5px solid #dedede;
	border-radius:15px;
}

#preface4 h1 {
	font-weight:700;
	font-family:'poppins';
	color:#0069c5;
}

#preface4 li {
	margin-bottom:10px;
	font-size:17pt;
	font-style:italic;
	background-color:yellow;
	font-weight:700;
	color:red;
}

#preface4 ul {
	list-style-image: url(../img/arrow.png);
}

#preface5 h1 {
	font-size:4vw;
	color:#0069c5;
	font-family:poppins;
	font-weight:700;
}
#about {
	background-color:#0069c5;
	color:#dedede;
	background-image:url(../img/bg.png);
	background-size:cover;
	background-repeat:no-repeat;
}
#about-2 {
	background-color:#dedede;
	color:#000;
	background-image:url(../img/bgg.png);
	background-size:contain;
}
#about-2 h1 {
	font-family:'montserrat';
	font-weight:700;
	color:#0069c5;
}

#about-3 {
	background-color:#0069c5;
	padding:100px;
	color:#ffffff;
}
#about-3 h1 {
	color:#fdd200;
	font-weight:700;
	font-family:'poppins';
}

#see {
	background-color:#dedede;
	font-family:montserrat;
	padding-bottom:0;
	padding-top:10px;
}


#modulganjil {
	background-color:#03273f;
	color:#3ebaff;
}

#modulganjil h1, #modulgenap h1 {
	font-family:montserrat;
	font-weight:700;
}

#modulgenap {
	background-color:#edf0f5;
	color:#457B9D;
}

#proof {
	background-color:#17a2b8;
	background-image:url(../img/bg3.png);
	background-size:cover;
}

#proof h1 {
	font-family:montserrat;
	font-weight:700;
}

#proof .col-md-4 h2 {
	background-image:url(../img/bgli.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	color:#000000;
}

#value {
	 background-image:url(../img/bg.png);
	 background-size:cover;
}

#value h1 {
	font-family:montserrat;
	font-weight:700;
	color:orange;
}

#value li {
	color:#ffffff;
	font-weight:700;
	margin-bottom:10px;
}

#value .row .col span {
	 color:#000000;
	 background:yellow; 
	 font-weight:700;
	 padding-left:10px;
	 padding-right:10px;
}

#buy {
	background-color:#ededed;
}

#buy h1 {
	font-family:montserrat;
	font-weight:700;
}

#guarantee h2 {
	font-family:montserrat;
	font-weight:700;
	color:yellow;
}

#faq {
	color:#748ab5;
}
#faq h1 {
	font-family:montserrat;
	text-align:center;
	font-weight:700;
	color:#697ace;
}
#faq b {
	color:#ffffff;
}

/* animation */
@keyframes blink {
	0% {box-shadow:0 0 0px;}
	100% {box-shadow:0 0 10px;}
}

@keyframes grow {
	0% {}
	100% {transform:scale(1.05);}
}

@keyframes goyang {
	0% {top:0px;left:0px;}
	50% {top:10px;left:10px;}
	100% {top:20px;left:0px;}
}


/* button style */



html {
  scroll-behavior: smooth;
}