body {
    font-family: 'auto';
}

/* Common */
.contact-number-img{
    width: 1.5em;
}

.site-btn {
    background-color: #F6C844;
    border-radius: 1em;
    padding: 0.5em 1em;
    border: none;
    color: black !important;
}

.site-btn a {
    color: black !important;
    text-decoration: none;
}

.site-heading-left {
    display: inline-block;
    padding: 0.2em;
    border-radius: 0.2em;
    background: linear-gradient(135deg, #F6C844 0%, #F6C844 32%, #FFFFFF 32%, #FFFFFF 100%);
}

.site-heading-left-50 {
    background: linear-gradient(135deg, #F6C844 0%, #F6C844 50%, #FFFFFF 50%, #FFFFFF 100%);
}

.site-heading-right {
    display: inline-block;
    padding: 0.2em;
    border-radius: 0.2em;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 68%, #F6C844 68%, #F6C844 100%);
}

.site-heading-right-50 {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 50%, #F6C844 50%, #F6C844 100%);
}

.site-heading-double {
    display: inline-block;
    padding: 0.2em;
    border-radius: 0.2em;
    background: linear-gradient(135deg, #F6C844 0%, #F6C844 32%, #FFFFFF 32%, #FFFFFF 68%, #F6C844 68%, #F6C844 100%);;;
}

.site-heading-double-gray {
    background: linear-gradient(135deg, #F6C844 0%, #F6C844 32%, #F8F8F8 32%, #F8F8F8 68%, #F6C844 68%, #F6C844 100%);;;
}

footer {
    background-color: black;
    text-align: center;
    color: #FFFFFF;
    padding: 2em;
}

footer h3 {
    margin-bottom: 0.1em;
}

hr {
    color: white;
    border-color: white;
    width: 5%;
    display: inline-block;
    margin-top: 0em;
    margin-left: 0.3em;
    margin-right: 0.3em;
    margin-bottom: 0.5em;
}

footer p {
    display: inline-block;
}

.contact-form {
    background-image: url('../images/infrastructure/11.png');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 3em;
}

.contact-form h2 {
    color: #1D4071;
    margin-bottom: 1em;
}

.contact-form .row {
    border: 1px solid lightgray;
    border-radius: 2em;
    display: flex;
    justify-content: center;
    padding: 2em;
    background-color: white;
}

.contact-form form input {
    border: none;
    border-bottom: 2px solid #1D4071;
    color: gray;
}

.contact-form .message {
    align-self: flex-end;
}

.contact-form .note {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.contact-form .note img {
    height: 10em;
    width: 10em;
}

/* Navbar */
.navbar {
    height: 4em;
    border-bottom: 1px solid lightgray;
}

.navbar-brand {
    position: absolute;
    margin-top: 4em;
    background: white;
    z-index: 999;
    border: 1px solid lightgray;
}

.nav-item {
    display: inline-block;
}

.nav-item.active {
    border-bottom: 2px solid #408CBB;
}


.nav-link {
    color: black;
}

/* Home intro banner */
.intro-video {
	position:relative;
    height: 40em;
    display: flex;
    justify-content: center;
}

.intro-video img {
	max-width:100%;
    height: 100%;
}

.intro-video iframe {
	/* display:none; */
}

.intro-video .play-btn {
	position:absolute;
	z-index:666;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background-color:transparent;
	border:0;
}

.intro-video .play-btn:hover {
	cursor:pointer;
}

.intro-video .play-btn:focus {
	outline:0;
}

/* Home intro text */
#home .intro-text {
    color: #1D4071;
    padding-top: 3em;
    padding-left: 1em;
    border-bottom: 2px solid #1D4071;
}

#home .intro-text .content-text{
    float: right
}

#home .intro-text img {
    float: left;
}

/* Home store */
#home .store {
    color: #1D4071;
    padding: 3em 10em;
    border-bottom: 2px solid #1D4071;
}

#home .store {
    text-align: center;
}

#home .store img {
    width: 6em;
}

#home .store p {
    color: black;
    padding: 1em;
    font-weight: bold;
}

/* Home services */
#home .service {
    margin: 0;
    padding: 0;
    border: 2px solid #F6C844;
}

#home .service img {
    width: 100%;
    position: relative;
    display: inline-block;
}

#home .service .overlay {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    background-color: rgb(8, 59, 117);
    opacity: 0.7;
    color: white;
    font-weight: bold;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* Infra intro */
.infra-intro {
    background-image: url('../images/infrastructure/banner.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 30em;
    width:100%
}

.infra-intro .intro-text {
    color: white;
    padding-top: 10em;
    padding-left: 5em;
}

.infra-intro .intro-text .second {
    color:  #F6C844
}

.infra-intro .intro-text .forth {
    color:  #F6C844
}

/* Infra services */
#infra .service {
    margin-bottom: 1.5em;
}

#infra .service .content-text {
    padding-top: 5em;
}

#infra .service .content-text-left{
    padding-left: 5%;
}

#infra .service .content-text-right{
    padding-right: 5%;
}

#infra .brochure {
    text-align: center;
    background-color: #F8F8F8;
    padding: 3em;
}

#infra .brochure h2 {
    color: #1D4071;
}

/* About Intro */
.about-intro {
    background-image: url('../images/about/Banner.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    height: 35em;
    width:100%;
    background-position: center;
}

.about-intro .intro-text {
    padding-top: 10em;
    padding-left: 15em;
    color: #1D4071;
    display: flex;
    flex-direction: row;
}

.about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10em;
    padding-top: 3em;
    padding-bottom: 3em;
    color: #1D4071;
}

.about-brand {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-brand img {
    height: 6em;
}

.brand-title {
    display: inline-block;
    text-align: center;
    padding: 2em;
    margin-top: 1em;
}

.brand-title h2 {
    margin-bottom: 0;
}

.brand-title hr {
    border-color: #1D4071;
    width: 20%;
}

.about-text .vision {
    border-right: 1px solid #F6C844;
}

.about-text .mission *{
    right: 0;
    position: absolute;
}

/* About store */
#about .store {
    color: #1D4071;
    padding: 3em 10em;
    border-bottom: 2px solid #1D4071;
}

#about .store {
    text-align: center;
}

#about .store img {
    width: 6em;
}

#about .store p {
    color: black;
    padding: 1em;
    font-weight: bold;
}