@charset "utf-8";

/* CSS Document */



* {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

:root {

  -blue: #0064B1 !important;

  gray-dark: #838388 !important;

}

	

	a:hover {

  text-decoration: none;

}



.headerNav .header-logo {

  color: #001b4f;

    font-weight: 700;

    font-size: 23px;

    transition: .4s;

    -webkit-transition: .4s;

    -moz-transition: .4s;

    -ms-transition: .4s;

    -o-transition: .4s;

}



.headerNav {

  background: #fff;

  -webkit-box-shadow: 0 1px 5px 0 rgba(83, 83, 83, 0.4);

  box-shadow: 0 1px 5px 0 rgba(83, 83, 83, 0.4);

  position: -webkit-sticky;

  position: sticky;

  top: 0;

  z-index: 1000;

}



.headerNav .main-menu>li {

  position: relative;

}



.headerNav .main-menu>li>a {

  color: #173966;

  font-size: 15px;

  padding: 25px 1.5vw;

  font-weight: 700;

  display: block;

  transition: .4s;

  -webkit-transition: .4s;

  -moz-transition: .4s;

  -ms-transition: .4s;

  -o-transition: .4s;

}



.headerNav .main-menu>li.active>a {

  color: #31b992;

}



.headerNav .main-menu>li:hover>a {

  color: #31b992;

}



.headerNav .main-menu>li>a>i {

  color: #03328E;

}



.headerNav .main-menu>li>a:hover>i {

  color: #fff;

}



.headerNav .main-menu>li:hover>a i {

  color: #fff;

}



.headerNav .main-menu .sub-menu {

  display: none;

  position: absolute;

  left: 50%;

  top: 100%;

  width: 180px;

  overflow: hidden;

  border-top: 2px solid #f49306;

  background: #fff;

  -webkit-box-shadow: 0 1px 5px 0 rgba(83, 83, 83, 0.2);

  box-shadow: 0 1px 5px 0 rgba(83, 83, 83, 0.2);

  z-index: 5;

  transform: translateX(-50%);

  webkit-transform: translateX(-50%);

  moz-transform: translateX(-50%);

  ms-transform: translateX(-50%);

  o-transform: translateX(-50%);

}



.headerNav .main-menu .sub-menu a {

  padding: 11px 10px;

  display: block;

  color: #173966;

  font-weight: 600;

  font-size: 15px;

  transition: .4s;

  -webkit-transition: .4s;

  -moz-transition: .4s;

  -ms-transition: .4s;

  -o-transition: .4s;

}



.headerNav .main-menu .sub-menu a i {

  color: #03328E;

}



.headerNav .main-menu .sub-menu a:hover {

  background: #31b992;

  color: #fff;

}



.headerNav .main-menu>li:hover .sub-menu {

  display: block;

}



.headerNav .header-logo figure img {

  max-width: 200px;

}



.headerNav .demo-link {

  margin-left: 1vw;

}



.headerNav .side-menu-close {

  background: transparent;

}



.headerNav .side-menu-close span {

  background: #21395F;

  width: 28px;

}



#call-action .call-action {

  color: #001b4f;

  font-weight: 700;

  font-size: 23px;

  transition: .4s;

  -webkit-transition: .4s;

  -moz-transition: .4s;

  -ms-transition: .4s;

  -o-transition: .4s;

}



#call-action .call-action:hover {

  color: #31b992;

}



/* side menu */

.side-menu-wrap {

  width: 300px;

  position: fixed;

  left: -100%;

  top: 0;

  background: #fff;

  height: 100%;

  -webkit-box-shadow: 0 1px 5px 0 rgba(83, 83, 83, 0.2);

  box-shadow: 0 1px 5px 0 rgba(83, 83, 83, 0.2);

  overflow-y: auto;

  z-index: 15000;

  transition: .4s;

  -webkit-transition: .4s;

  -moz-transition: .4s;

  -ms-transition: .4s;

  -o-transition: .4s;

}



.side-menu-wrap.opened {

  left: 0;

  transition: .8s;

  -webkit-transition: .8s;

  -moz-transition: .8s;

  -ms-transition: .8s;

  -o-transition: .8s;

}



.side-menu-logo {

  border-bottom: 2px solid #FE8204;

}



.side-menu-nav .main-menu>li {

  position: relative;

  border-bottom: 1px solid #ccc;

}



.side-menu-nav .main-menu>li>a>i {

  color: #03328E;

}



.side-menu-nav .main-menu .sub-menu {

  border-top: 1px solid #FE8204;

  background: #fff;

  display: none;

}



.side-menu-nav .main-menu .sub-menu li {

  border-bottom: 1px solid #eee;

}



.side-menu-nav .main-menu .sub-menu a {

  padding: 10px 22px;

  display: block;

  color: #212529;

  font-weight: 600;

  font-size: .9em;

  transition: .4s;

  webkit-transition: .4s;

  moz-transition: .4s;

  ms-transition: .4s;

  o-transition: .4s;

}



.side-menu-nav .main-menu .sub-menu a i {

  color: #03328E;

}



.side-menu-nav .main-menu .sub-menu~i {

  font-size: .8em;

  position: absolute;

  padding: 21px 11px;

  right: 0;

  top: 0;

  border-left: 1px solid #ccc;

}



.side-menu-nav .main-menu .sub-menu a:hover {

  background: #F5F5F5;

}



.side-menu-nav .main-menu>li>a {

  color: #212529;

  padding: 15px 30px 15px 10px;

  font-weight: 600;

  display: block;

  transition: .4s;

  -webkit-transition: .4s;

  -moz-transition: .4s;

  -ms-transition: .4s;

  -o-transition: .4s;

}



.side-menu-wrap .side-menu-close {

  position: absolute;

  right: 0;

  top: 0;

  height: 30px;

  width: 30px;

  border-radius: 0;

  webkit-border-radius: 0;

  moz-border-radius: 0;

  ms-border-radius: 0;

  o-border-radius: 0;

}



.side-menu-close {

  height: 40px;

  width: 40px;

  background: #21395F;

  border-radius: 50%;

  webkit-border-radius: 50%;

  moz-border-radius: 50%;

  ms-border-radius: 50%;

  o-border-radius: 50%;

}



.side-menu-close span {

  height: 2px;

  width: 20px;

  background: #fff;

  position: relative;

  opacity: 1;

  transition: .4s;

  -webkit-transition: .4s;

  -moz-transition: .4s;

  -ms-transition: .4s;

  -o-transition: .4s;

}



.side-menu-close span:nth-child(1) {

  top: -5px;

}



.side-menu-close span:nth-child(3) {

  bottom: -5px;

}



.side-menu-close.closed span:nth-child(1) {

  transform: translateY(7px) rotate(45deg);

  webkit-transform: translateY(7px) rotate(45deg);

  moz-transform: translateY(7px) rotate(45deg);

  ms-transform: translateY(7px) rotate(45deg);

  o-transform: translateY(7px) rotate(45deg);

}



.side-menu-close.closed span:nth-child(2) {

  opacity: 0;

}



.side-menu-close.closed span:nth-child(3) {

  transform: translateY(-7px) rotate(-45deg);

  webkit-transform: translateY(-7px) rotate(-45deg);

  moz-transform: translateY(-7px) rotate(-45deg);

  ms-transform: translateY(-7px) rotate(-45deg);

  o-transform: translateY(-7px) rotate(-45deg);

}



/*  custom overlay */

.custom-overlay {

  position: fixed;

  left: 0;

  top: 0;

  background: rgba(0, 0, 0, .4);

  z-index: 12500;

  visibility: hidden;

  opacity: 0;

  transition: .4s;

  -webkit-transition: .4s;

  -moz-transition: .4s;

  -ms-transition: .4s;

  -o-transition: .4s;

}



.custom-overlay.show {

  visibility: visible;

  opacity: 1;

  transition: .4s;

  -webkit-transition: .4s;

  -moz-transition: .4s;

  -ms-transition: .4s;

  -o-transition: .4s;

}

	

	.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {

  padding-right: 0px !important;

  padding-left: 0px !important;

}



/* yourNavbar */

#yourNavbar {

	background-color: #F7F7F2; /* For browsers that do not support gradients */

	background: linear-gradient(90deg, #dff5f9 0%, #d3dee9 59%, #e5fbff 100%);

	

}

.brandlogo>img .logo {

	position: absolute;

     left: 15%;

     margin-left: -50px;

     height: 200px;

     top: 20px;

	bottom: -20px !important;

	z-index: 2 !important;}







.brandlogo>img {

	max-width: 250px !important;

	height: auto !important;

	margin: -5px 0 !important;

}



.navbar-light .navbar-nav .show > .nav-link,

.navbar-light .navbar-nav .active > .nav-link,

.navbar-light .navbar-nav .nav-link.show,

.navbar-light .navbar-nav .nav-link.active {

	color: #0064B1 !important;

	text-decoration: underline !important;

	font-size: 1.2em !important;  

	font-weight: 400 !important;

	

	

}



.nav-link {

	font-size: 1.2em !important;

}





body {

  margin:0;

}



h1 {
	
	font-family: 'Komet';
	font-weight: 900;
	font-style: normal;
	letter-spacing: 1px !important;
	font-size: 65px !important;
}



h2 {
  font-family: "Komet ExtraLight SC", "Komet Regular";
  margin-top: -85px !important;

  font-weight:350 !important;

  letter-spacing: 1px;

  font-size:32px !important;

}

p {

  font-family: "Komet Regular";

  letter-spacing: 1px !important;

  font-size:16px !important;

  line-height: 1.5em !important;

  color: #838388 !important;

}



.header {

  position:relative;

  text-align:center;

  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);

  color:white;

}

.logo {

  width:50px;

  fill:white;

  padding-right:15px;

  display:inline-block;

  vertical-align: middle;

}



.inner-header {

  height:60vh;

  width:100%;

  margin: 0;

  padding: 0;

}

	.inner-header>h1 {

	margin-top: 80px !important;

	}

	.inner-header h2 {

	margin-top: -130px !important;

	}



.flex { /*Flexbox for containers*/

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  text-align: center;

}

.flex>* {

        flex: 1 1 160px;

    }

.break {

  flex-basis: 100%;

  height: 0;

}



.waves {

  position:relative;

  width: 100%;

  height:15vh;

  margin-bottom:-7px; /*Fix for safari gap*/

  min-height:100px;

  max-height:150px;

}



	

	

	

	/*SKEWED blue & yellow BACKGROUND*/

	

	

	header {

  min-height: 100px;

  background-color: #1B5FC1;

  padding: 150px 0;

  margin-top: -200px;

  transform: skew(0deg, -10deg);

	  }

	.skewedcontent {

		 margin-top: 200px;

  transform: skew(0deg, 10deg);

  text-align: center;

  color: #fff;

	}

	

	.skewedcontent h3{

	font-size: 3em;

    font-weight: 400;

    letter-spacing: 2px;

    text-transform: uppercase;

	}

	

	.skewedcontentyellow {

		 margin-top: 200px;

  transform: skew(0deg, 10deg);

  text-align: center;

  color: #fff;

	}

	

	.skewedcontentyellow h3{

	font-size: 3em;

    font-weight: 400;

    letter-spacing: 2px;

    text-transform: uppercase;

	}

	

	.yellowskewed {

	background-color: #E7E039;

	padding: 1px 0;

	transform: skew(0deg, -10deg);

	}

	

	

	

	

	

	/*ABOUT PAGE*/

/*top slanted banner container*/



/* angled div */

.slanted-div {

  position: relative;

  padding: 15px 0;

  background: #1B5FC1;

	max-width: 99.5%;

  overflow: visible;

  z-index: 1;

}

	.slanted-div p{

		font-size: 25px !important;

		margin-top: 30px;

		

	}



/* where the magic happens */

.slanted-div:before, .slanted-div:after {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  z-index: -1;

  top: 0;

  transform-origin: left top;

  transform: skewY(-4deg);

}



.slanted-div:after {

  bottom: 0;

  transform-origin: left bottom;

  transform: skewY(4deg);

}



/* displays the content inside, as these settings in the parent breaks the effect */

.slanted-div div {

  text-align: center;

  font-size: 1.5em;

  line-height: 2.5;

}



	

.content {

  position:relative;

  height:20vh;

  text-align:center;

  background-color: white;

}





.bluepinkgradientbox {

 	padding: 2px 0px 5px 0px;

	margin: 0px;

	background: rgb(33,112,150);

    background: linear-gradient(90deg, rgba(33,112,150,1) 0%, rgba(246,123,238,1) 50%, rgba(2,193,249,1) 100%);

	box-shadow: 5px 0px 20px 1px;

}



.limegreengradientbox {

 	background-color: #97c43d;

	padding: 8px 0px 6px 0px;

	margin: 0px;

	background-image: linear-gradient(0deg, #5D966A, #97c43d);

	box-shadow: 5px 0px 20px 1px;

}

.greengradientbox {

 	background-color: #014D27;

	padding: 6px 0px 6px 0px;

	margin: 0px;

	background-image: linear-gradient(0deg, black, green);

	box-shadow: 5px 0px 20px 1px;

}

.gradientbox {

 	background-color: #B3B3B3;

	padding: 1px 0 0 0;

	margin: 0;

	background-image: linear-gradient(315deg, #f6f6f6 0%, #e9e9e9 74%);

	box-shadow: 5px 0px 10px 1px;

}



.whitebox {

 	background-color: #FFFFFF;

	padding: 10px 0 5px 0;

	margin: 0;

	background-image: linear-gradient(150deg, #f6f6f6 80%, #e9e9e9 95%);

	box-shadow: 5px 30px 10px 1px;

}

.whitesmbox {

 	background-color: #FFFFFF;

	padding: 3px 0 6px 0;

	margin-top: 0;

	background-image: linear-gradient(150deg, #f6f6f6 80%, #e9e9e9 95%);

	box-shadow: 5px 10px 10px 1px;

}

	

	/* ==========================================  */

/* =====        Template Slanted Divs          ========  */

/* ==========================================  */



.slanted-bottom, .slanted-bottom-r{

  position: relative;

  padding: 0px 0;

  overflow: visible;

  z-index: 1;

}



.slanted-bottom:after {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  z-index: -1;

  bottom: 0;

  transform-origin: left bottom;

  transform: skewY(3deg);

}





.slanted-bottom-r:after {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  z-index: -1;

  bottom: 0;

  transform-origin: right bottom;

  transform: skewY(-3deg);

}





.slanted-top, .slanted-top-r {

  position: relative;

  padding: 0px 0;

  overflow: visible;

  z-index: 1;

}







.slanted-top:before {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  z-index: -1;

  top: 0;

  transform-origin: left top;

  transform: skewY(-3deg);

}

.slanted-top-r:before {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  z-index: -1;

  top: 0;

  transform-origin: right top;

  transform: skewY(3deg);

}



.bg-theme-blue{

  margin:100px 0;

  padding:1px 0px;

	background: linear-gradient(180deg, rgba(27,95,193,1) 0%, rgba(56,130,237,1) 48%, rgba(27,95,193,.6) 100%);  

    background-size: cover; 

    background-position: center center;

    background-repeat:no-repeat;

}

	.bg-theme-blue p {

		font-size: 25px !important;

		margin-top: 5px;

		

	}

	

	.bg-theme-blue h2{

		font-weight: 550 !important;

	}

	.text-yellow {

		color: #E7E039 !important;

	}

	

	.bg-theme-yellow{

  margin:100px 0;

  padding:90px 0px;

	background: linear-gradient(180deg, rgb(251 255 33) 0%, rgb(249 239 0) 48%, rgb(255 245 7 / 60%) 100%);  

    background-size: cover; 

    background-position: center center;

    background-repeat:no-repeat;

}

	.bg-theme-yellow p {

		font-size: 18px !important;

		margin-top: 5px;

		color: #117a8b !important;

		

	}



/* general styles */

.white{

  color:#fff;

}

	.black{

  color:#000000;

}

.spacer{

  margin-top:40px;

  margin-bottom:40px;

}





#toTopBtn {

     position: fixed;

    bottom: 6px;

    right: 6px;

    z-index: 98;

    padding: 21px;

    background-color: hsla( #E7E039,76%,62%,.8) !important;

    

}





.js .cd-top--fade-out {

    opacity: .3;

}



.js .cd-top--is-visible {

    visibility: visible;

    opacity: 1;

}



.js .cd-top {

    visibility: hidden;

    opacity: 0;

    transition: opacity .3s,visibility .3s,background-color .3s;

}



.cd-top {

    position: fixed;

    bottom: 20px;

    bottom: var(--cd-back-to-top-margin);

    right: 20px;

    right: var(--cd-back-to-top-margin);

    display: inline-block;

    height: 40px;

    height: var(--cd-back-to-top-size);

    width: 40px;

    width: var(--cd-back-to-top-size);

    box-shadow: 0 0 10px rgba(0,0,0,.05) !important;

    background: url(https://res.cloudinary.com/dxfq3iotg/image/upload/v1571057658/cd-top-arrow.svg) no-repeat center 50%;

    background-color: hsla(5,76%,62%,.8);

    background-color: hsla(var(--cd-color-3-h),var(--cd-color-3-s),var(--cd-color-3-l),0.8);

}



.text-blue {

	color: #0064B1 !important;

}



	/* BLUE SLANTED BANNER ABOUT SECTION

-------------------------------------------------- */

.blueabout-sec {

	background-size: cover;

	color: #fff;

	position: relative;

}

.blueabout-sec:before {

	content: ' ';

	position: absolute;

	width: 100%;

	height: 100%;

	background: #E7E039;

	top: 0;

	left: 0;

}

.blueabout-sec h1 {

	font-size: 35px;

	font-weight: 800;

	margin-top: 5%;

}

.blueabout-sec h2 {

	font-size: 35px;

	font-weight: 800;

	margin-top: 1%;

}

.blueabout-sec h2 small {

	display: block;

	font-size: 35px !important;

	margin-top: 200px !important;

	margin-bottom: 55px;

	padding-left: 3px;

}

.blueabout-sec p {

	font-size: 25px !important;

	margin: 50px 10px;

}





/* YELLOW ABOUT SECTION

-------------------------------------------------- */

.about-sec {

	background-size: cover;

	color: #fff;

	position: relative;

}

.about-sec:before {

	content: ' ';

	position: absolute;

	width: 100%;

	height: 100%;

	background: #E7E039;

	top: 0;

	left: 0;

}

.about-sec h1 {

	font-size: 35px !important;

	font-weight: 800;

	margin-top: 5% !important;

}

.about-sec h2 {

	font-size: 35px !important;

	font-weight: 800;

	margin-top: -2px !important;

}

.about-sec h2 small {

	display: block;

	font-size: 35px !important;

	margin: 50px 0 !important;

	padding-left: 3px;

}

.about-sec p {

	font-size: 18px !important;

	margin-top: 40px !important;

	margin-bottom: -20px;

	padding: 15px 1px !important;

}

	

	/* WHITE ABOUT SECTION

-------------------------------------------------- */

.about-sec-white {

	background-size: cover;

	color: #fff;

	position: relative;

}

.about-sec-white:before {

	content: ' ';

	position: absolute;

	width: 100%;

	height: 100%;

	background: #FFF;

	top: 0;

	left: 0;

}

.about-sec-white h1 {

	font-size: 35px !important;

	font-weight: 800;

	margin-top: 5% !important;

}

.about-sec-white h2 {

	font-size: 35px !important;

	font-weight: 800;

	margin-top: -2px !important;

}

.about-sec-white h2 small {

	display: block;

	font-size: 35px !important;

	margin: 15px 0 !important;

	

}

.about-sec-white p {

	font-size: 18px !important;

	margin-top: 8px !important;

	margin-bottom: -14px;

	padding: 10px 1px !important;

}





.action-sec{width:100%; float:left; background:#222}

.action-box{float:left; width:100%; text-align:center;}

.action-box h2{color:#fff; font-size:20px;}





.dark {

    padding: 15px;

    background:#064293;

    color: #ffffff;

    margin-top: 10px;

    margin-bottom: 10px;}

	

	/* Designs Page*/

	

	.container-designs {

	display: grid;

	grid-template-columns: 1fr;

	text-align: left;

	overflow: hidden;

}

	.portfolio-items-wrapper {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  overflow: hidden;

}



.portfolio-item-wrapper {

  position: relative;

}



.portfolio-img-background {

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  height: 350px;

  width: 100%;

  overflow: hidden;

}



.img-text-wrapper {

  position: absolute;

  top: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  height: 100%;

  text-align: center;

  padding-left: 100px;

  padding-right: 100px;

}



.img-text-wrapper .subtitle {

  transition: 1s;

  color: transparent;

  overflow: hidden;

}



.image-blur {

  transition: 1s;

  filter: brightness(10%);

}



.img-text-wrapper:hover .subtitle {

  color: lightseagreen;

  font-weight: 700;

}



.logo-wrapper img {

  width: 50%;

  margin-bottom: 10px;

  overflow: hidden;

}



.two-column-wrapper {

  display: grid;

  grid-template-columns: 1fr 1fr;

  overflow: hidden;

}



.profile-image-wrapper img {

  width: 100%;

  overflow: hidden;

}



.profile-content-wrapper {

  padding: 30px;

}



.profile-content-wrapper h1 {

  color: lightseagreen;

}



@media (min-width: 800px) {

  .portfolio-items-wrapper {

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-areas: 

      "header  header"

      "nav     nav"

      "sidebar content"

      "ad      footer";

  }

	  }

	

@media (max-width: 575px) {

  .portfolio-img-background {

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  height: 300px;

  width: 100%;

}

.img-text-wrapper:hover .subtitle {

overflow: hidden;

}

.img-text-wrapper {

padding-left: 10px;

padding-right: 10px;

font-weight: 600;

font-size: 15px;

overflow: hidden;

margin-bottom: 10px;

}

	.portfolio-items-wrapper {	

   grid-template-columns: 1fr 1fr;

}

  .portfolio-item-wrapper {

  position: relative;

}

 

  .logo-wrapper img {

  width: 70%;

  margin-bottom: 3px;

}

  



.img-text-wrapper {

  top: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  height: 100%;

  text-align: center;

 }

.img-text-wrapper:hover .subtitle {

  color: lightseagreen;

  font-weight: 600;

  font-size:20px;

}

	.brandlogo>img {

	max-width: 200px !important;

	height: auto !important;

	margin: -5px 0 !important;}

	

	header {

	padding: 50px 0;

			}

	

	.skewedcontent {

	margin: 180px 0 10px 0;			

			}

	

	.inner-header {

	height: 38vh;		

			}

	.inner-header>h1 {

	font-size: 34px !important;

	margin-top: -40px !important;

	}

	.inner-header h2 {

	font-size: 22px !important;

	margin-top: -89px !important;

	}

	.skewedcontentyellow {

	margin: 50px 0 -100px 0;

 	}

	

	.skewedcontentyellow h3{

	font-size: 3em;

    font-weight: 400;

    letter-spacing: 2px;

    text-transform: uppercase;

	}

	

	.bg-theme-blue {

	margin: 30px 0 !important;			

	}

	.bg-theme-blue h2 {

	font-size: 30px !important;

	margin-bottom: 20px !important;

	}

	.bg-theme-yellow {

	margin: 120px 0;			

	}

	.bg-theme-yellow h2 {

	margin: -60px 0 20px 0 !important;

	font-size: 30px !important;

	}

}

	



  



	/* End of CSS for Designs Page*/



	/* CSS for services columns on where's my refund page*/

	.container-services {

  width: 100%;

  height: 100%;

  padding: 0px 8%;

}

	.container-services h1 {

  text-align: center;

  padding-top: 10%;

  margin-bottom: 60px;

  font-weight: 600;

  position: relative;

}

	.container-services h1::after {

  content: '';

  background: #17a2b8;

  width: 100px;

  height: 5px;

  position: absolute;

  bottom: -5px;

  left: 50%;

  transform: translateX(-50%);

}

.row-services {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  grid-gap: 30px;

}

	.service {

  text-align: center;

  padding: 25px 10px;

  border-radius: 5px;

  font-size: 14px;

  cursor: pointer;

  background: transparent;

  transition: transform 0.5s, background 0.5s;

}



.service i {

  font-size: 40px;

  margin-bottom: 80px;

  color: #17a2b8;

  

}



.service h2 {

  font-weight: 600;

  margin-bottom: 8px;

}



.service:hover {

  background: #17a2b8;

  color: #fff;

  transform: scale(1.05);

}



.service:hover i {

  color: #fff;

}

.service:hover p {

  color: #fff !important;

}



	/* End of CSS for services columns on where's my refund page*/

	

	

	/* CSS for notary columns on notary services page*/

	

	.first-column {

    color: white !important;

    font-size: 2rem;

    border-width:2px;

    border-color:#1BC1B4;  

    background: #1BC1B4;

    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);

    align-items: center;



}

	.first-column>p{

	color:#FFFFFF !important;

	}

	.first-column h2{

	color:#D4FFFA;

	margin-top: 20px !important;

	}

.second-column {

  border-color: #0EF0E5 !important;

  border-style: dotted; 

  border-width: 2px;

}

	.second-column h2{

	color:#0EF0E5;

	margin-top: 20px !important;

	}

	/* End of CSS for notary columns on notary services page*/

	

	/*Start of CSS for Immigration Pricing Page*/

	

	/* CSS for notary columns on notary services page*/

	

	.first-columnImmigration {

    color: white !important;

    font-size: 1rem;

    border-width:2px;

    border-color:#104182;  

    background: #104182;

    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);

    align-items: center;



}

	.first-columnImmigration>p{

	color:#FFFFFF !important;

	}

	.first-columnImmigration h2{

	color:#0EF0E5;

	margin-top: 20px !important;

	}

.second-columnImmigration {

  border-color: #0EF0E5 !important;

  border-style: dotted; 

  border-width: 2px;

}

	.second-columnImmigration h2{

	color:#0068b2;

	margin-top: 20px !important;

	}

	

	section.pricing {

  background: #007bff;

  background: linear-gradient(to right, #0062E6, #33AEFF);

}

	

	



.pricing .card {

  border: none;

  border-radius: 1rem;

  transition: all 0.2s;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}



.pricing hr {

  margin: 1.5rem 0;

}



.pricing .card-title {

  margin: 0.5rem 0;

  font-size: 0.9rem;

  letter-spacing: .1rem;

  font-weight: bold;

}



.pricing .card-price {

  font-size: 3rem;

  margin: 0;

}



.pricing .card-price .period {

  font-size: 0.8rem;

}



.pricing ul li {

  margin-bottom: 1rem;

}



.pricing .text-muted {

  opacity: 0.7;

}



.pricing .btn {

  font-size: 80%;

  border-radius: 5rem;

  letter-spacing: .1rem;

  font-weight: bold;

  padding: 1rem;

  opacity: 0.7;

	transition: all 0.2s;}

	

	

	/* pricing sidebar */

pricing#sidebar{

  float:right;

  width:30%;

  margin-top:10px;

}



pricing#sidebar .quote input, aside#sidebar .quote textarea{

  width:90%;

  padding:5px;

}



.pricing-table{

  padding:0;

  background:none;

  color:#ffffff;

  margin-top:10px;

  margin-bottom:10px;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  width: min(1600px, 100%);

  margin: auto;

}



.pricing-card{

  flex: 1;

  max-width: 360px;

  background-color: #fff;

  margin: 20px 10px;

  text-align: center;

  cursor: pointer;

  overflow: hidden;

  color: #2d2d2d;

  transition: .3s linear;

}



.pricing-card-header{

  background-color: #0fbcf9;

  display: inline-block;

  color: #fff;

  padding: 12px 30px;

  border-radius: 0 0 20px 20px;

  font-size: 16px;

  text-transform: uppercase;

  font-weight: 600;

  transition: .4s linear;

}



.pricing-card:hover .pricing-card-header{

  box-shadow: 0 0 0 26em #0fbcf9;

}



.price{

  font-size: 70px;

  color: #0fbcf9;

  margin: 40px 0;

  transition: .2s linear;

}



.price sup, .price span{

  font-size: 22px;

  font-weight: 700;

}



.pricing-card:hover ,.pricing-card:hover .price{

  color: #fff;

}



.pricing-card li{

  font-size: 16px;

  padding: 10px 0;

  text-transform: uppercase;

}



.order-btn{

  display: inline-block;

  margin-bottom: 40px;

  margin-top: 80px;

  border: 2px solid #0fbcf9;

  color: #0fbcf9;

  padding: 18px 40px;

  border-radius: 8px;

  text-transform: uppercase;

  font-weight: 500;

  transition: .3s linear;

}



.order-btn:hover{

  background-color: #0fbcf9;

  color: #fff;

}



@media screen and (max-width:1100px){

  .pricing-card{

    flex: 50%;

  }

}



	/*End of CSS for Immigration Pricing Page*/



/* Hover Effects on Card */



@media (min-width: 992px) {

  .pricing .card:hover {

    margin-top: -.25rem;

    margin-bottom: .25rem;

    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);

  }



  .pricing .card:hover .btn {

    opacity: 1;

  }

	}

	

/* Footer */

.container-fluid {

  padding-right: 0px !important;

  padding-left: 0px !important;

  }



/* Animation */



/* subtle zoom to attention and then back */

.pop-outin {

  animation: 1s anim-popoutin ease;

}



@keyframes anim-popoutin {

  0% {

    color: green;

    transform: scale(0);

    opacity: 0;

    text-shadow: 0 0 0 rgba(0, 0, 0, 0);

  }

  5% {

    color: #D6F956;

    transform: scale(1);

    opacity: 1;

    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

  }

  8% {

    color: #F7F9F7;

    transform: scale(2);

    opacity: 1;

    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);

  }

  100% {

    /* animate nothing to add pause at the end of animation */

    transform: scale(1);

    opacity: 1;

    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);

  }

}



.fadeleft {

  color: #fff;

  animation: fadeInLeft 1s ease-in-out;

}



@keyframes fadeInLeft {

  from {

    opacity: 0;

    transform: translateX(-300px);

  }

  to {

    opacity: 1;

  }

}



.faderight {

  color: #fff;

  animation: fadeInRight 1s ease-in-out;

}



@keyframes fadeInRight {

  from {

    opacity: 0;

    transform: translateX(300px);

  }

  to {

    opacity: 1;

  }

}



/* lineup class and keyframes */

.lineUp {

  animation: 2s anim-lineUp ease-out;

}

@keyframes anim-lineUp {

  0% {

    opacity: 0;

    transform: translateY(80%);

  }

  20% {

    opacity: 0;

  }

  50% {

    opacity: 1;

    transform: translateY(0%);

  }

  100% {

    opacity: 1;

    transform: translateY(0%);

  }

}





.parallax > use {

  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;

}

.parallax > use:nth-child(1) {

  animation-delay: -2s;

  animation-duration: 7s;

}

.parallax > use:nth-child(2) {

  animation-delay: -3s;

  animation-duration: 10s;

}

.parallax > use:nth-child(3) {

  animation-delay: -4s;

  animation-duration: 13s;

}

.parallax > use:nth-child(4) {

  animation-delay: -5s;

  animation-duration: 20s;

}

@keyframes move-forever {

  0% {

   transform: translate3d(-90px,0,0);

  }

  100% { 

    transform: translate3d(85px,0,0);

  }

}

/*Shrinking for mobile*/

@media (max-width: 768px) {

  .waves {

    height:55px;

    min-height:40px;

  }

  .content {

    height:30vh;

  }

  h1 {

    font-size:40px !important;

  }

	h2 {

		margin-top: -130px !important;

		font-size:26px !important;

	}

	.mt-SM-half{

    margin-top: -5rem !important;

  }

	.mt-SM-1{

    margin-top: 10.25rem !important;

  }

	.service h2 {

  font-weight: 600;

  margin-top: -60px!important;

}

}





/* responsive slanted topbanner */

@media only screen

and (max-width : 720px) {

  

 /*top slanted banner container*/





	.slanted-div p{

		font-size: 20px !important;

		text-align: center !important;

		margin-top: 5px !important;

	}



/* where the magic happens */

.slanted-div:before, .slanted-div:after {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  z-index: -1;

  top: 0;

  transform-origin: left top;

  transform: skewY(-5deg);

}



.slanted-div:after {

  bottom: 0;

  transform-origin: left bottom;

  transform: skewY(5deg);

}



/* displays the content inside, as these settings in the parent breaks the effect */

.slanted-div div {

  text-align: center;

  font-size: 1.5em;

  line-height: 2.5;

}



  .slanted-div {

    padding: 2px 0;

  }

	

	.blueabout-sec h1 {

	font-size: 35px !important;

	font-weight: 800 !important;

	margin: -40px 0 !important;

	font-color: #79FFDF !important;

}

.blueabout-sec h2 {

	font-size: 35px !important;

	font-weight: 800 !important;

	margin-top: -20px !important;

	margin-bottom: -80px !important;

}

.blueabout-sec h2 small {

	display: block;

	font-size: 40px !important;

	margin: 120px 0 !important;

	padding-left: 3px;

}

	.about-sec h1 {

	font-size: 45px !important;

	font-weight: 800 !important;

	margin-top: 1% !important;

	font-color: #79FFDF !important;

}

.about-sec h2 {

	font-size: 35px !important;

	font-weight: 800 !important;

	margin-top: -50px !important;

}

.about-sec h2 small {

	display: block;

	font-size: 40px !important;

	margin: 90px 0 !important;

	

}

	.about-sec p{

		font-size: 20px !important;

		text-align: center !important;

		margin-top: -50px !important;

		margin-bottom: 10px;

		padding-bottom: 5px !important;

	}

	.mb-SM-6{

    margin-bottom: 6.0rem !important;

  }

	p {

		line-height: 1.7 !important;

	}

	 }