html {
	height: 101%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 20px;
	margin: 0;
}
body {
	height: 100%;
}

.pi-inner-wrap {
	height: 50vh;
}
.pi-inner-wrap .pi-container {
	height: 100%;
	padding: 0;
}
.pi-inner-wrap-footer {
	height: initial;
}

.pi-section1 {
	background: url('../img/section1-bkg.svg') center center no-repeat;
	background-size: 130%;
	height: 100%;
	width: 100%;
}

h1 {
	font-size: 50px;
	color: #ff5200;
	font-weight: bold;
}

.pi-color-blue {
	color: #ff5200;
}

.pi-color-white {
	color: #ffffff;
}

.pi-bkg-white {
	background: #ffffff;
}

.pi-bkg-green {
	background: green;
}

.pi-bkg-yellow {
	background: yellow;
}

.pi-bkg-red {
	background: red;
}

.pi-bkg-orange {
	background-color: #ff5200;
}

.pi-bkg-blue {
	background: #ff5200;
	background: linear-gradient(0deg, rgb(211, 41, 32) 0%, rgb(255, 82, 0) 50%);
}

.pi-bkg-mode {
	color: #ffffff;
}

.pi-logo-container {
	display: flex;
	padding-bottom: 3.75rem;
	height: 100%;
	justify-content: center;
	align-items: flex-end;
}

.pi-logo-container svg {
	fill: #ff5200;
}

.pi-block {
	display: block;
	background-color: #ff5200;
}

.pi-direction-row {
	flex-direction: row;
}

.pi-direction-column {
	flex-direction: column;
}

.pi-icon-holder {
	position: absolute;
	top: 6%;
	left: 0;
	width: 100%;
	/*height: 20%;*/
	text-align: center;
}

.pi-icon-holder .pi-icon {
	display: inline-block;
	height: 50%;
	width: 24%;
	margin: 0 1%;
}

.pi-icon img ,
.pi-icon svg {
	width: 66%;
	display: inline-block;
	margin-bottom: 20px;
}
.pi-icon svg {
	fill: #fff;
}
.pi-logo {
	display: flex;
	width: 90vw;
}

.pi-100w {
	width: 98%;
	margin: 0 1%;
}

.pi-50w {
	width: 48%;
	margin: 0 1%;
}

.pi-25w {
	width: 23%;
	margin: 0 1%;
}

.pi-15w {
	width: 13%;
	margin: 0 1%;
}

.pi-100h {
	height: 100%;
}

.pi-75h {
	height: 75%;
}

.pi-50h {
	height: 50%;
}

.pi-33h {
	height: 33%;
}

.pi-25h {
	height: 25%;
}

.pi-align-items-start {
	align-items: flex-start;
}

.pi-align-items-end {
	align-items: flex-end;
}

.pi-align-items-center {
	align-items: center;
}

.pi-align-items-baseline {
	align-items: baseline;
}

.pi-align-items-stretch {
	align-items: stretch;
}

.pi-what-we-do {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.pi-what-we-do h1 {
	margin-bottom: .6rem;
	text-align: center;
}

.pi-what-we-do hr {
	border-top: none;
	border-bottom: 2px solid #ff5200;
	width: 90%;
	margin: 0 auto 1.6rem auto ;
}

.pi-bug svg {
		fill:#ff5200;
}

.pi-what-we-do .pi-payang {
	width: 30%;
  margin: 0 auto 1.6rem auto;
  display: block;
}

.pi-what-we-do .pi-services {
	min-height: 180px;
	margin-bottom: 16px;
	align-items: stretch;
}

.pi-what-we-do .pi-services img ,
.pi-what-we-do svg {
	width: 100px;
	display: block;
	margin: 0 auto;
}

.pi-what-we-do .pi-services span {
	display: block;
	margin: 10px auto;
	text-align: center;
	min-height: 48px;
	line-height: 1.2;
}

.pi-what-we-do .pi-services span span {
	display: block;
  margin: 0;
  min-height: initial;
  line-height: initial;
}

.pi-footer {
	background: #ff5200;
	background: linear-gradient(0deg, rgb(211, 41, 32) 0%, rgb(255, 82, 0) 50%);
	padding: 1rem 0 2rem 0;
	height: 100%;
}

.pi-footer .pi-contant-p {
	padding: 1rem 2rem;
}

.pi-footer .pi-email-numbers ,
.pi-footer .pi-email-numbers a ,
.pi-footer .pi-phone-numbers ,
.pi-footer .pi-phone-numbers a ,
.pi-footer .pi-fax-numbers ,
.pi-footer .pi-fax-numbers a {
	color: #fff;
	transition: all .5s ease-in-out .1s;
	text-align: center;
	text-decoration: none;
	padding: 4px 16px;
	border-radius: 16px;
}

/* .pi-footer .pi-email-numbers a ,
.pi-footer .pi-phone-numbers a ,
.pi-footer .pi-fax-numbers a {
	text-decoration: underline;
} */

.pi-footer .pi-email-numbers a:hover ,
.pi-footer .pi-phone-numbers a:hover ,
.pi-footer .pi-fax-numbers a:hover {
	color: #ff5200;
	background-color: #efefef;
	text-decoration: none;
}

.pi-footer .pi-logo {
	width: 50vw;
	margin: 0 auto;
}

.pi-contant-info {
	/*display: flex;
	flex-direction: column;
	align-content: flex-end;*/
	text-align: center;
}
.pi-what-we-do svg {
	width: 100%;
	max-width: 5rem;
	height: auto;
	margin-bottom: 1.25rem;
}

.pi-what-we-do svg {
	fill: #ff5200;
}
.pi-icon svg {
	fill: #fff;
}

.pi-light-blk {
	display: block;
}
.pi-dark-blk {
	display: none;
}

.pi-switcher {
	position: fixed;
	top: 20px;
	right: 20px;
}

.pi-dark ,
.pi-light {
	text-align: center;
	border-radius: 10px;
	padding: 10px;
	cursor: pointer;
	min-width: 140px;
}

.pi-light {
	display: none;
	border: 2px solid #e542e0;
	color: #e542e0;
	background-color: rgba(3,37,115,.4);
}

.pi-dark {
	display: block;
	border: 2px solid #fff;
	color: #fff;
	background-color: rgba(2,0,36,.4);
}


/* Body Dark Mode */

	.pi-dark-mode .pi-light { display: block; }

	.pi-dark-mode .pi-dark { display: none; }

	.pi-dark-mode .pi-light-blk {
		display: none;
	}
	.pi-dark-mode .pi-dark-blk {
		display: block;
	}
	body.pi-dark-mode  {
		background: #021E56;
	}
	.pi-dark-mode .pi-color-white {
		color: #e542e0;
	}
	.pi-dark-mode .pi-bkg-white {
		background: #021E56;
	}
	.pi-dark-mode .pi-bkg-blue {
		background: rgb(3,37,115);
		background: linear-gradient(45deg, rgba(3,37,115,1) 0%, rgba(118,48,207,1) 100%);
	}

	.pi-dark-mode h1 , .pi-dark-mode h2 , .pi-dark-mode h3 , .pi-dark-mode h4 , .pi-dark-mode h5 , .pi-dark-mode h6 {
		color: #e542e0;
	}
	.pi-dark-mode .pi-section1 {
		background: url('../img/section1-bkg.svg') center center no-repeat;
	}
	.pi-dark-mode .pi-logo-container svg {
		fill: green;
	}

	.pi-dark-mode .pi-bug svg {
			fill: #e542e0;
	}

 .pi-dark-mode .pi-what-we-do p ,
 .pi-dark-mode .pi-what-we-do .pi-services span ,
 .pi-dark-mode .pi-what-we-do ul ,
 .pi-dark-mode .pi-what-we-do ul li {
 		color: #e542e0;
 }
	.pi-dark-mode .pi-what-we-do hr {
		border-bottom: 2px solid #e542e0;
	}
	.pi-dark-mode .pi-svg {
		filter: invert(1) saturate(0);
	}
	.pi-dark-mode .pi-section1 .pi-svg {
		filter: invert(0) saturate(0);
	}
	.pi-dark-mode .pi-what-we-do svg {
		fill: #e542e0;
	}
	.pi-dark-mode .pi-icon svg {
		fill: #e542e0;
	}
	.pi-dark-mode .pi-footer {
		background: rgb(3,37,115);
		background: linear-gradient(45deg, rgba(3,37,115,1) 0%, rgba(118,48,207,1) 100%);
	}
	.pi-dark-mode .pi-footer .pi-email-numbers ,
	.pi-dark-mode .pi-footer .pi-email-numbers a ,
	.pi-dark-mode .pi-footer .pi-phone-numbers ,
	.pi-dark-mode .pi-footer .pi-phone-numbers a ,
	.pi-dark-mode .pi-footer .pi-fax-numbers ,
	.pi-dark-mode .pi-footer .pi-fax-numbers a {
		color: #ffff17;
	}

	.pi-dark-mode .pi-footer .pi-email-numbers a:hover ,
	.pi-dark-mode .pi-footer .pi-phone-numbers a:hover ,
	.pi-dark-mode .pi-footer .pi-fax-numbers a:hover {
		color: #e542e0;
		background-color: #ffff17;
	}

/* /Body Dark Mode */


/* Color Scheme Dark Mode */
@media (prefers-color-scheme: dark) {
	.pi-dark ,
	.pi-light {
		display: none;
	}
	.pi-light-blk {
		display: none;
	}
	.pi-dark-blk {
		display: block;
	}
	body {
		background: #021E56;
	}
	.pi-color-white {
		color: #e542e0;
	}
	.pi-bkg-white {
		background: #021E56;
	}
	.pi-bkg-blue {
		background: rgb(3,37,115);
		background: linear-gradient(45deg, rgba(3,37,115,1) 0%, rgba(118,48,207,1) 100%);
	}

	h1 , h2 , h3 , h4 , h5 , h6 {
		color: #e542e0;
	}
	.pi-section1 {
		background: url('../img/section1-bkg.svg') center center no-repeat;
	}
	.pi-logo-container svg {
		fill: green;
	}

 .pi-what-we-do p ,
 .pi-what-we-do .pi-services span ,
 .pi-what-we-do ul ,
 .pi-what-we-do ul li {
 		color: #e542e0;
 }
	.pi-what-we-do hr {
		border-bottom: 2px solid #e542e0;
	}
	.pi-svg {
		filter: invert(1) saturate(0);
	}
	.pi-section1 .pi-svg {
		filter: invert(0) saturate(0);
	}
	.pi-what-we-do svg {
		fill: #e542e0;
	}
	.pi-icon svg {
		fill: #e542e0;
	}
	.pi-footer {
		background: rgb(3,37,115);
		background: linear-gradient(45deg, rgba(3,37,115,1) 0%, rgba(118,48,207,1) 100%);
	}
	.pi-footer .pi-email-numbers ,
	.pi-footer .pi-email-numbers a ,
	.pi-footer .pi-phone-numbers ,
	.pi-footer .pi-phone-numbers a ,
	.pi-footer .pi-fax-numbers ,
	.pi-footer .pi-fax-numbers a {
		color: #ffff17;
	}

	.pi-footer .pi-email-numbers a:hover ,
	.pi-footer .pi-phone-numbers a:hover ,
	.pi-footer .pi-fax-numbers a:hover {
		color: #e542e0;
		background-color: #ffff17;
	}

}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.pi-logo {
		width: 50%;
	}
	.pi-icon img ,
	.pi-icon svg {
		width: 56%;
	}
}


/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.pi-container {
		height: 90%;
	}
	.pi-logo {
		width: 50%;
	}
	.pi-icon-holder {
		top: 6%;
	}
	.pi-what-we-do hr {
		width: 40%;
	}
	.pi-what-we-do .pi-payang {
		width: 60%;
	}
	.pi-tag-line {
		font-size: 44px;
	}
	.pi-what-we-do .pi-services img ,
	.pi-what-we-do svg {
		width: 80px;
	}
	.pi-icon-holder .pi-icon {
		display: inline-block;
		height: 25%;
		width: 14%;
		margin: 0 1%;
	}
	.pi-icon-holder .pi-icon img ,
	.pi-icon-holder .pi-icon svg {
		display: block;
		margin: 0 auto;
	}
	.pi-footer .pi-email-numbers ,
	.pi-footer .pi-email-numbers a ,
	.pi-footer .pi-phone-numbers ,
	.pi-footer .pi-phone-numbers a ,
	.pi-footer .pi-fax-numbers ,
	.pi-footer .pi-fax-numbers a {
		text-align: center;
	}

	.pi-footer .pi-logo {
		width: 25vw;
	}

}

/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.pi-inner-wrap {
		height: 50vh;
	}
	.pi-inner-wrap-footer {
	height: initial;
	}
	.pi-what-we-do .pi-services img ,
	.pi-what-we-do svg {
		width: 120px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* iPhone 5 landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
	.pi-icon-holder .pi-icon {
		width: 14%;
	}
	.pi-logo {
	width: 50%;
	}
	.pi-icon img ,
	.pi-icon svg {
		width: 56%;
	}
}


/* iPhone 6, 7, 8 landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
	.pi-inner-wrap {
		border: 0;
	}
	.pi-icon-holder .pi-icon {
		width: 14%;
	}
	.pi-logo {
	width: 50%;
	}
}

/* iPhone X landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) {
	.pi-inner-wrap {
		margin-left: auto;
		margin-right: auto;
	  padding:2.5em constant(safe-area-inset-right) 2.5em constant(safe-area-inset-left);
	}
	.pi-icon-holder .pi-icon {
		width: 14%;
	}
	.pi-logo {
		width: 50%;
	}
}