/*
     ____  __  ____   ________________  ___    __  ___
    / __ \/  |/  / | / /  _/ ____/ __ \/   |  /  |/  /
   / / / / /|_/ /  |/ // // / __/ /_/ / /| | / /|_/ /
  / /_/ / /  / / /|  // // /_/ / _, _/ ___ |/ /  / /
  \____/_/  /_/_/ |_/___/\____/_/ |_/_/  |_/_/  /_/

   Author   : Eddy Yanto
   Updated  : 03/09/2025
*/
html, body{
	background: #1A1A1A;
	color: #DDD	;
	font-family: Overpass;
	font-size: 18px;
}
body{
	background: url(https://omnigram.s3.ap-southeast-1.amazonaws.com/wave.jpg) no-repeat center 60px;
	overflow-x: hidden;
}
a{
	color: #EEEEEE;
}
a:hover{
	color: #888;
}
.navbar{
	background:#1A1A1A;
	opacity: .95;
}
	.navbar-expand-lg .navbar-nav .nav-link{
		padding-right: 1rem;
		padding-left: 1rem;
		font-size: 18px;

	}
	.navbar-expand-lg{
		padding-bottom: 20px;
		padding-left: 0;
		padding-right: 0;
	}
	.navbar-collapse{
		margin-top: 20px;
	}
	.navbar-dark .navbar-nav .nav-link{
		color: #EEEEEE;
	}
	.navbar ul li a{
		transition: 0.3s;
		transform: translateY(0px);
	}
	.navbar ul li a:hover{
		transition: 0.3s;
		transform: translateY(5px);
	}
	.navbar-nav li.active a{
		/*background:url(../img/chevron-down.png) no-repeat top center;*/
	}
	.navbar img#logo{
		margin-top: 0;
		width: 65%;
		height: 65%;
	}
	.navbar-dark .navbar-toggler-icon{
		color:red;
	}
	nav .container{
		border-bottom: 1px dotted #BBB;
		padding-bottom: 20px;
	}
.tagline{
	/*margin-bottom: 20px;*/
}
.tagline h3{
	font-size: 40px;
	line-height: 48px;
	text-align: center;
	border-bottom: 1px dotted #BBB;
	padding:70px 20px;
}
.keyword{
	color: #EE161F;
}
.services{
	padding-top: 40px;
	text-align: center;	
	padding-bottom: 40px;
}
	.services .row div img{
		width: 60px;
		height: 60px;
	}
	.services .row div{
		border-radius: 6px;
	}
	.services .row div a{
		text-decoration: none;
	}
	.services .row div a:hover{
			color: #EEEEEE;
	}
	.services .row div{
		transition: 0.5s;
		transform: translateY(0px);
	}
	.services .row div:hover{
		background: rgba(43, 43, 43, .4);
		transition: 0.5s;
		transform: translateY(-8px);	
	}
	.services .row div p:after{
		content: "\A\a0";
		white-space: pre-wrap;
	}
	.services .row div:hover p:after{
		content: "\A→";
		white-space: pre-wrap;
	}
	.services h3{
		margin-bottom: 30px;
	}
	.services h4{
		margin-bottom: 30px;
		font-weight: 800;
		font-size: 17px;
	}
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-15px);}
        60% {transform: translateY(-15px);}
    }
	.services .chevron, .chevron{
		margin: 15px auto;
        animation: bounce 2s ease-in-out infinite alternate;
	}
.hero{
	font-style: italic;
	font-size: 30px;
	background: #EEEEEE;
	color: #1A1A1A;
	text-align: center;
	padding: 0;
}
	.hero .container{
		padding: 50px 0 40px;
	}
	.hero img{
	}
	.hero h5{
		text-align: left;
		margin-bottom: 40px;
		font-weight: 600;
		font-style: normal;
		font-size: 24px;
	}
.footnote{
	font-size: 14px;
}
.projects,
.solutions{
	background: #FFFFFF;
	padding: 0;
	margin: 20px 0 30px;
}
	body.home .projects{
		margin: 0 0 30px;
	}
	.projects .see-more,
	.solutions .see-more{
		padding: 20px;
	} 
	.projects .see-more	h4 a,
	.solutions .see-more h4 a{
		color: #1A1A1A;
		text-decoration: underline;
		transition: 0.5s;
		padding-left: 0;
	}
	.projects .see-more	h4 a:hover,
	.solutions .see-more h4 a:hover{
		transition: 0.5s;
		padding-left: 15px;
		/*content: "";*/
	}

	.projects .see-more	h4 a:hover:before{
		/*content: "→ ";*/
	}
	.projects div p,
	.solutions div p{
		font-size: 15px;
		font-weight: 800;
		color: #888;
		margin-bottom: 5px;
	}
	.projects .row div,
	.solutions .row div{
		padding: 15px;
	}
	.projects .row div div,
	.solutions .row div div{
		background: #EEEEEE;
		color: #1A1A1A;
		border-radius: 5px;
	}
	.projects .row div div,
	.solutions .row div div{
		transition: 0.5s;
		transform: translateY(8px);		
	}
	.projects .row div div:hover,
	.solutions .row div div:hover{
		transition: 0.5s;
		transform: translateY(0px);	
		background-color: #DDD;
	}
	.projects .row div div a,
	.solutions .row div div a{
		color: #1A1A1A;
		text-decoration: none;
	}
	.projects .row div div a:hover,
	.solutions .row div div a:hover{
		color: #1C1C1C;
	}
	.projects .row div div img,
	.solutions .row div div img{
		width: 100%;
		border-radius: 3px;
	}
	.projects .row div div a:hover img:hover,
	.solutions .row div div a:hover img:hover{
		opacity: 0.8;
	}
	.projects h4,
	.solutions h4{
		font-size: 22px;
		font-weight: 800;
		margin: 15px auto 0;
	}
	.projects div .odd,
	.solutions div .odd{
		/*margin-top: 300px;*/
	}
	.projects p,
	.solutions p{
		margin-top: 0;
	}
	.solutions .container .category{
		border-bottom: 1px dotted #1A1A1A;
		margin: 0;
	}
	.solutions .container .category h3{
		color:#000;
		margin:20px 0 10px 0;
	}
	.solutions .container .items{
		margin-bottom: 30px;
	}
	.recent{
		padding-bottom: 30px;
	}
.footer{
	background: #1A1A1A;
	height: 200px;
	padding: 25px 0;
	text-align: center;
}
	.footer .copyright{
		border-top: 1px dotted #CCC;
		font-family: Montserrat;
	}
	.footer h5{
		line-height: 30px;
	}
	.footer .row{
		margin: 30px auto;
	}
	.footer p{
		font-size: 15px;
		text-align: center;
		margin: 30px auto;
	}
	.footer .links h5{
		text-align: left;
	}
	.footer ul{
		padding-left: 15px;
	}
	.footer ul li{
		/*list-style-type: none;*/
		padding-left: 5px;
		text-align: left;
	}

.services .col-lg-6{
	/*margin-bottom: 20px;*/
}
	.services .col-lg-6 p{
		/*border-bottom: 1px solid #EEEEEE;*/
	}
.light{
	background: #EEE;
	color: #1A1A1A;
}

body.projects .hero{
	padding-top: 0;
}
body.projects .tagline{
	background: #1A1A1A;
}

@media (max-width:480px){
	.navbar .container{
		margin:15px 15px;
	}
	.tagline h3{
		font-size: 30px;
		line-height: 40px;
		text-align: center;
		border-bottom: 1px dotted #BBB;
		padding:10px;
	}
	.services .row .col-sm-12 p{
		border-bottom: 1px dotted #EEEEEE;
	}
	.hero .container{
		padding:20px 10px;
	}
}