body{
	background-color: #f9f9f9;
	font-family: "Crimson Text";
}

.main{
	background-color: rgba(255, 255, 255, 0.2);
}

.home-description{
	font-style: italic;
	font-weight: 600;
	font-family: "Crimson";
	font-size: 19px;
    padding-top: 15px;
    padding-bottom: 25px;
    line-height: 29px;

}

.social a i{
	height: 40px;
	width: 40px;
	border: 1px solid #111;
	line-height: 40px;
	margin: 0 10px;
	color: #111;
	font-size: 20px;
	padding-bottom: 20px;
	}

.social a:hover i{
	color: #fff;
	border-color: #7dacbb;
	background-color: #169de0;
	}


@media (min-width: 778px)
{
		.main{
			height: 100vh;
			overflow: hidden;
		}
		h3.nama-aplikasi{
			font-size: 95px;
		}	

		.btn-group-vertical{
    		padding: 20px 87.5px;
    	}

    	.info{
			font-family: "Crimson";
			line-height: 28px;
		    font-size: 16px;
		    padding-top: 15px;
		    padding-right: 50px;
		}
		
		.home-description{
			padding-right: 90px;
			padding-left: 90px;
			
		}
}

.nama-aplikasi{
	font-style: bold;
	font-weight: 600;
	font-family: "Tahoma";
	font-size: 98px;
	color: whitesmoke;
    margin-top: -20px;
	text-shadow: 1px 1px 8px rgb(7, 24, 88);
}

.deskripsi-aplikasi{
	font-style: bold;
	font-weight: 600;
	font-family: "Tahoma";
	font-size: 22px;
	color: whitesmoke;
    margin-top: -20px;
}
.img-rabbit{
	width: 100%;
}
.btn-rabbit{
	background-color: #fff;
	color: #111;
	font-style: italic;
	border: 1px solid #111;
	border-radius: 0px !important;
	transition: all 0.4s ease-in-out;
	margin-bottom: 20px;
	font-family: "Crimson";
	font-size: 13px;
	}

.btn-rabbit:hover{
	color: #fff;
	background-color: #1d8cdb;
	border-color: #3b62b5;}

p{
	color: #f2fafc;
	font-size: 16px;
	text-shadow: 1px 1px 8px rgb(7, 24, 88);
}

.page-title{
	text-transform: uppercase;
	font-family: 'Josefin Sans';
}

.siapa{
	text-transform: uppercase;
	font-family: 'Josefin Sans';
}

/*Home Style*/
.logo{
	padding-top: 100px;
	text-transform: uppercase;
	font-size: 12px;
}

.logo h4{
	font-family: 'Josefin Sans';
}


footer{
	padding: 22px 0 10px 0;
	font-style: italic;
	}


.back{
    width: 170px;    
    font-family: "Crimson";
    font-size: 17px;
    font-style: italic;
    vertical-align: middle;
    text-align: center;
    display: block;
    clear: both;
    margin-top: 70px;	 
}

.back i{
	margin-left: -40px;
    margin-right: 17px;
    font-size: 20px;
}
 
.form-control:focus {
    border-color: #70c5c0;
}
    .form-control, .btn {        
        border-radius: 2px;
    }
    .login-form {
        margin: 0 auto;   
    }
    .login-form form {
        border-radius: 2px;
        margin-bottom: 15px;
        font-size: 13px;
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;  
        position: relative; 
        width: 85%;
    } 
.login-form input[type="checkbox"] {
    position: relative;
    top: 1px;
}
/* .form-control{
	margin-top: 30px;
	width: 100%;

} */

.btn{
	padding: 10px 60px;
	height: 45px;
	font-size: 16px;
}

.btn-group-vertical{
    font-family: "Josefin Sans";    
}

.about{
	font-family: "Josefin Sans";
	/*margin-top: 35px;*/
	/*margin-bottom: 25px;*/
	font-size: 32px;
	
}
.form-control{
	font-style: italic;
	border-radius: 0;
	font-family: "Crimson";
	font-size: 16px;
}

.page-title{
	
	font-size: 32px;
	font-family: "Josefin Sans";
}

.fa-heartbeat{
	    color: #bb9e7d;
}

::selection {
	color: #fff;
   	background-color: #bb9e7d;
}

.bottom{
	padding-right: 20px;
}

.page-title{
	position: relative;
	display: inline-block;
}

.page-title:after,.page-title:before{
	content: '';
	position: absolute;
	height: 1px;
	background-color: black;
	left: 0;
	margin: 2px;
}

.social{
	padding-bottom: 15px;
}

.submit{

	font-family: "Crimson"
	font-size: 16px;
}

.subtitle{
	font-style: italic;
	font-weight: 600;
	font-size: 20px;
	color: #ffffff;
	line-height: 28px;
	font-family: "Crimson";
	margin-top: 15px;
	margin-bottom: 20px;
	padding-right: 40px;

	}
.page-title:after{
	width: 75%;
	top: -9px;

}

.page-title:before{
	width: 40%;
	bottom: -7px;
}

#watermark .marker{
	position: absolute;
	font-size: 60px;
	opacity: 0.1;
	font-family: "Josefin Sans";
	text-transform: uppercase;
	left: 0;
	top: -5px;
}

#watermark{
	position: relative;
}

.item{
	
	background-color: #313131;
	color: #f9f9f9;
}

#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
    /*margin-left: 0px;*/
}

.owl-theme .owl-controls {
    margin-top: 10px;
    margin-right: 10px;
    text-align: center;
    width: 100%;
    position: absolute;
    top: calc(44% - 40px);
		}

.owl-next{
	right: 0;
	padding-right: 1px;

}

.owl-prev{
	left: 0;
	padding-left: 1px;
}



.owl-theme .owl-controls .owl-nav [class*=owl-]{
	position: absolute;
	border-radius: 0px;
	font-size: 21px;
	padding: 15px 20px;
	margin: 0px;
	background-color: #fff; 

}

.owl-theme .owl-controls .owl-nav [class*=owl-] i{
	color: #333;
	
}

.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{
	background-color: #bb9e7d;
	border-color: #bb9e7d;
}
.owl-theme .owl-controls .owl-nav [class*=owl-]:hover i{
	color: #fff;
}
@media (max-width: 1024px) and (orientation: landscape){
	.main{
		height: auto;
	}
}

/* Laptop */

@media (max-width : 992px){
	.nama-aplikasi{
		font-size: 72pt;
	}
	.deskripsi-aplikasi{
		font-size: 22pt;
	}
}

/* Tablet */

@media (max-width : 768px){
	.nama-aplikasi{
		font-size: 95px;
	}	
	.deskripsi-aplikasi{
		font-size: 18pt;
	}
}

/* Mobile Phone */

@media (max-width : 576px){
	.nama-aplikasi{
		font-size: 52pt;
	}	
	.deskripsi-aplikasi{
		font-size: 12pt;
	}
}

.custom_btn{
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}
.show{
	display: block;
}

/*================================================ BAGIAN ANIMASI DI BACKGROUND ===========================*/

/* Enhanced background colors - Purple/Pink/Green palette */
 .neural-background {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -2;
     background: radial-gradient(circle at 15% 85%, rgba(4, 67, 108, 0.7) 0%, transparent 50%), radial-gradient(circle at 85% 15%, rgba(60, 167, 206, 0.8) 0%, transparent 50%), radial-gradient(circle at 45% 60%, rgba(0, 60, 128, 0.6) 0%, transparent 50%), radial-gradient(circle at 70% 40%, rgba(211, 243, 243, 0.4) 0%, transparent 50%), linear-gradient(135deg, #0a0a0a 0%, #2d1b3d 50%, #000000 100%);
     animation: backgroundPulse 14s ease-in-out infinite;
}
 @keyframes backgroundPulse {
     0%, 100% {
         filter: brightness(0.9) saturate(1.4) hue-rotate(0deg);
    }
     33% {
         filter: brightness(1.1) saturate(1.7) hue-rotate(15deg);
    }
     66% {
         filter: brightness(1.0) saturate(1.5) hue-rotate(-10deg);
    }
}
/* Floating geometric shapes */
 .geometric-shapes {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     overflow: hidden;
}
 .shape {
     position: absolute;
     border: 1px solid rgba(0, 255, 255, 0.3);
     animation: floatShape 20s linear infinite;
}
 .shape:nth-child(1) {
     width: 100px;
     height: 100px;
     left: 10%;
     animation-delay: 0s;
     border-color: rgba(255, 105, 180, 0.4);
}
 .shape:nth-child(2) {
     width: 60px;
     height: 60px;
     left: 70%;
     animation-delay: -5s;
     border-radius: 50%;
     border-color: rgba(147, 112, 219, 0.4);
}
 .shape:nth-child(3) {
     width: 80px;
     height: 80px;
     left: 30%;
     animation-delay: -10s;
     transform: rotate(45deg);
     border-color: rgba(224, 163, 255, 0.4);
}
 .shape:nth-child(4) {
     width: 120px;
     height: 120px;
     left: 50%;
     animation-delay: -15s;
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     background: linear-gradient(45deg, rgba(255, 105, 180, 0.1), transparent);
}
 @keyframes floatShape {
     from {
         transform: translateY(100vh) rotate(0deg);
         opacity: 0;
    }
     10%, 90% {
         opacity: 1;
    }
     to {
         transform: translateY(-100px) rotate(360deg);
         opacity: 0;
    }
}
/* Neural network lines */
 .neural-lines {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
}
 .neural-line {
     position: absolute;
     background: linear-gradient(90deg, transparent, #00ffff, transparent);
     height: 1px;
     animation: neuralPulse 3s ease-in-out infinite;
}
 .neural-line:nth-child(1) {
     top: 20%;
     left: 0;
     width: 100%;
     background: linear-gradient(90deg, transparent, #e0a3ff, transparent);
     animation-delay: 0s;
}
 .neural-line:nth-child(2) {
     top: 60%;
     left: 0;
     width: 100%;
     background: linear-gradient(90deg, transparent, #ff69b4, transparent);
     animation-delay: -1s;
}
 .neural-line:nth-child(3) {
     top: 40%;
     left: 0;
     width: 100%;
     background: linear-gradient(90deg, transparent, #9370db, transparent);
     animation-delay: -2s;
}
 @keyframes neuralPulse {
     0%, 100% {
         opacity: 0.2;
         transform: scaleX(0.5);
    }
     50% {
         opacity: 1;
         transform: scaleX(1);
    }
}