* {
	/*padding: 0;*/
	padding: 2px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: 'Fira Sans', sans-serif;
	z-index: 100;
	margin-top: 2px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
.container {
    width:100%;
    max-width:1600px;
    margin:0 auto;
    padding-left:128px;
    padding-right:128px
}
@media (max-width: 1024px) {
    .container {
        padding-left:64px;
        padding-right:64px
    }
}
@media (max-width: 767px) {
    .container {
        padding-left:32px;
        padding-right:32px
    }
}
.hamburger {
	position: relative;
	display: block;
	width: 35px;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	outline: none;
	border: none;
	z-index: 100
}
.hamburger .bar,.hamburger:after,.hamburger:before {
	content: '';
	display: block;
	width: 100%;
	height: 5px;
	background-color: #000;
	margin: 6px 0px;
	-webkit-transition: 0.4s;
	transition: 0.4s
}
.hamburger.is-active:before {
    -webkit-transform:rotate(-45deg) translate(-8px, 6px);
    transform:rotate(-45deg) translate(-8px, 6px)
}
.hamburger.is-active:after {
    -webkit-transform:rotate(45deg) translate(-9px, -8px);
    transform:rotate(45deg) translate(-9px, -8px);
	z-index: 100
}
.hamburger.is-active .bar {
    opacity:0
}

.reviews-nav {
	position: absolute;
	top: 130px;
	width: 80%;
	height: 31px;
	background-color: rgba(0, 0, 0, 0.7);
	float: right;
	color: #FFF;
	text-align: right;
	left: 10%
}


.po-nav {
	position: absolute;
	top: 180px;
	left: 10%;
	z-index: 90
}

.nav-items {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: capitalize;
	cursor: pointer;
	transition: 0.3s;
	position: relative;
	display: flex;
	justify-content: center;
	text-decoration: none;
}


.reviews-nav .active {   
    color: #00FF26;
}
.mobile-nav .active {
  color: #00FF26;
}


.nav-items::after {
  content: '';
  position: absolute;
  left: 0px;
  bottom: -10px;
  width: 100%;
  height: 2px;
  background-color: white;
  box-shadow: 0 0 5px white;
  transform: scale(0);
  transform-origin: left;
  transition: 0.3s;
}
.nav-items:hover::after {
  transform: scale(1);
}
.active:hover::after {
  background-color: #00FF26;
  box-shadow: 0 0 5px #00FF26;
}

/* *************************************** */



.mobile-nav {
	position: fixed;
	top: 0;
	width: 100%;
	min-height: 100vh;
	display: block;
	z-index: 100;
	/*background-color: rgba(18, 0, 47, 0.4);*/
	background-color: rgba(0, 0, 0, 0.55);
	padding-top: 120px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	left: 100%;
}
.mobile-nav.is-active {
    left:0
}
.mobile-nav a {
    display:block;
    width:100%;
    max-width:200px;
    margin:0 auto 16px;
    text-align:center;
    padding:12px 16px;
    background-color:rgba(31, 16, 63, 0.2);
    color:#FFF;
    text-decoration:none
}
.mobile-nav a:hover {
	background-color: rgba(36, 16, 79, 0.3)
}
@media (min-width: 768px) {
    .mobile-nav {
        display:none
    }
    .hamburger {
        display:none
    }
}
/*section h2 {
    text-align:center;
    margin-bottom:32px;
    text-transform:uppercase;
    color:#313131;
    font-size:36px
	font-size:24px
}*/
.button {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline:none;
    background:none;
    display:inline-block;
    color:#FFF;
    font-size:20px;
    background-color:#FF9FDB;
    padding:12px 16px;
    border-radius:8px;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:700;
    cursor:pointer
}
@media (max-width: 767px) {
    .button {
        font-size:18px
    }
}
img {
    max-width:100%
}
header {
	color: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99
}
header .container {
    /*padding-top:32px;*/
	padding-top:2px;
    padding-bottom:32px;
    display:-webkit-box;

    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
header .container h2 {
    color:inherit;
    text-transform:uppercase;
    font-size:32px;
    font-weight:900
}
header .container h2 span {
    font-weight:600
}
header .container nav {
    display:-ms-grid;
    display:grid;
    grid-gap:16px;
    -ms-grid-columns:(auto)[];
    grid-template-columns:repeat(6, auto)
}
@media (max-width: 767px) {
    header .container nav {
        display:none
    }
}
header .container nav a {
    color:inherit;
    font-size:20px;
    text-decoration:none
}
header.is-scrolling {
	left: 10px;
	width: 90%;
	
	background-color:rgba(18, 0, 47, 0)
    /*background-color:#12002F*/
	
}
header.is-scrolling .container {
    padding-top:16px;
    padding-bottom:16px
}

/*
main section.banner {
    color:#FFF;
    position:relative;
    min-height:100vh;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    background-image:url("../images/header.jpg");
    background-position:top right;
    background-size:cover
}
main section.banner:after {
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:0;
    background-color:#12002F;
    opacity:0.8
}
main section.banner .container {
    position:relative;
    z-index:1
}
main section.banner .container h1 {
    font-size:72px;
    margin-bottom:32px
}
main section.banner .container h1 span {
    color:#FF9FDB
}
@media (max-width: 767px) {
    main section.banner .container h1 {
        font-size:32px
    }
}
main section.banner .container h3 {
    font-size:36px;
    font-weight:400;
    margin-bottom:32px
}
@media (max-width: 767px) {
    main section.banner .container h3 {
        font-size:20px
    }
}
main .services {
    background-color:#EEE
}
main .services .container {
    padding-top:64px;
    padding-bottom:64px
}
main .services .container .services-grid {
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:(1fr)[4];
    grid-template-columns:repeat(4, 1fr);
    grid-gap:16px
}
@media (max-width: 1024px) {
    main .services .container .services-grid {
        -ms-grid-columns:(1fr)[2];
        grid-template-columns:repeat(2, 1fr)
    }
}
@media (max-width: 767px) {
    main .services .container .services-grid {
        -ms-grid-columns:1fr;
        grid-template-columns:1fr
    }
}
main .services .container .services-grid .service {
    background-color:#FFF;
    border-radius:16px;
    overflow:hidden;
    -webkit-box-shadow:0px 6px 12px rgba(0,0,0,0.1);
    box-shadow:0px 6px 12px rgba(0,0,0,0.1)
}
main .services .container .services-grid .service .img-box {
    display:block;
    width:100%;
    border-bottom:5px solid #FF9FDB
}
main .services .container .services-grid .service .img-box .img {
    display:block;
    width:100%;
    height:128px;
    -o-object-fit:cover;
    object-fit:cover
}
main .services .container .services-grid .service .content {
    padding:16px
}
main .projects {
    padding-top:64px;
    padding-bottom:64px
}
main .projects .projects-grid {
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:(1fr)[3];
    grid-template-columns:repeat(3, 1fr);
    grid-gap:16px;
    margin-bottom:32px
}
@media (max-width: 768px) {
    main .projects .projects-grid {
        -ms-grid-columns:(1fr)[2];
        grid-template-columns:repeat(2, 1fr)
    }
}
@media (max-width: 767px) {
    main .projects .projects-grid {
        -ms-grid-columns:1fr;
        grid-template-columns:1fr
    }
}
main .projects .projects-grid .project {
    background-image:url("../images/project-img.jpg");
    border-radius:16px;
    overflow:hidden
}
main .projects .projects-grid .project .content {
    opacity:0;
    color:#FFF;
    padding:16px;
    background-color:rgba(64,39,68,0.8);
    -webkit-transition:0.4s;
    transition:0.4s
}
main .projects .projects-grid .project .content h3 {
    font-size:32px;
    margin-bottom:16px
}
@media (max-width: 1024px) {
    main .projects .projects-grid .project .content h3 {
        font-size:28px
    }
}
main .projects .projects-grid .project .content p {
    font-size:18px;
    margin-bottom:16px
}
@media (max-width: 1024px) {
    main .projects .projects-grid .project .content p {
        font-size:16px
    }
}
main .projects .projects-grid .project:hover .content {
    opacity:1
}
main .projects .center {
    text-align:center
}






main .contact {
    background-color:#9B75D7
}
main .contact .container {
    padding-top:64px;
    padding-bottom:64px
}
main .contact .container h2 {
    color:#FFF
}
main .contact .container form {
    display:block;
    margin:0 auto;
    max-width:680px
}
main .contact .container form .form-grid {
    display:-ms-grid;
    display:grid;
    grid-gap:16px;
    -ms-grid-columns:(1fr)[2];
    grid-template-columns:repeat(2, 1fr);
    margin-bottom:16px
}
@media (max-width: 767px) {
    main .contact .container form .form-grid {
        -ms-grid-columns:1fr;
        grid-template-columns:1fr
    }
}
main .contact .container form .form-grid .form-element,main .contact .container form .form-grid .form-area {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline:none;
    background:none;
    display:block;
    width:100%;
    background-color:#FFF;
    border-radius:8px;
    padding:16px;
    font-size:20px;
    color:#313131
}
main .contact .container form .form-grid .form-element::-webkit-input-placeholder,main .contact .container form .form-grid .form-area::-webkit-input-placeholder {
    color:#AAA
}
main .contact .container form .form-grid .form-element:-ms-input-placeholder,main .contact .container form .form-grid .form-area:-ms-input-placeholder {
    color:#AAA
}
main .contact .container form .form-grid .form-element::-ms-input-placeholder,main .contact .container form .form-grid .form-area::-ms-input-placeholder {
    color:#AAA
}
main .contact .container form .form-grid .form-element::placeholder,main .contact .container form .form-grid .form-area::placeholder {
    color:#AAA
}
main .contact .container form .form-grid .form-area {
    grid-column:1/-1
}
main .contact .container form .right-align {
    text-align:right
}

*/

@media (max-width: 767px) {
    .hide-mob {
        display:none
    }
}