@charset "utf-8";
/* CSS Document */
/* div {
	margin: 1px;
	border:solid thin #ccc;
} */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');

html {
  scroll-behavior: smooth;
}
body {
	font-family: 'Baloo 2', sans-serif;
	margin: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 14px;
	padding: 0;
	color: #333;
}
.hide-scroll::-webkit-scrollbar {
    display: none;
}
.hide-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.link-color {
  color: #980086;
transition-duration: 0.5s;
}
.link-color:hover {
  color: #fff;
transition-duration: 0.5s;
}
a {
	color: #980086;
	transition-duration: 0.5s;
}
a:hover {
	color: #222;
	transition-duration: 0.5s;
}
h1 {
  font-size: 4.5vw;
  margin: 0;
  padding: 0;
  line-height: 6vw;
  margin-bottom: 20px;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-transform: uppercase;
	font-weight: normal;
  color: #980086;
  font-family: "Exo 2", sans-serif;
}
a {
	text-decoration: none;
	transition-duration: 1s;
}

a:hover {
	text-decoration: none;
	transition-duration: 1s;
}
.active {
	display: flex !important;
}
.callout-detail {
	display: none;

}
.nav-detail {
	display: none;
}
.wrapper {
	display: flex;
	flex-direction: column;
	min-width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.featured-link {
color: #A09CF1;
transition-duration: 0.5s;
}
.featured-link:hover {
  color: #980086;
  transition-duration: 0.5s;
  }
.main-bg {
  background-image: linear-gradient(135deg, #000, #000, #0004, #000);
	/*background-image: url("images/mainbg.jpg");*/
	background-position: center;
	background-repeat: no-repeat;
	background-color: #000;
	position: fixed;
	top: -15px;
	left: -15px;
	right: -15px;
	bottom: -15px;
	z-index: -1;
	animation: bg-zoom 0.5s ease;
	background-size: 110%;
  filter: blur(1px);
  position: fixed;
}
@keyframes bg-zoom {
	0% {background-size: 110%;}
	100% {background-size: 150%;}
}
.nav {
  display: flex;
  align-items: center;
  transition-duration: 1s;
}
.div-gap {
  gap:10px;
}
.row-items {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between;
 
}
.nav:hover {
  display: flex;
  align-items: center;
  transition-duration: 1s;
  transform: rotate(90deg);
  color: #980086;
}
.header-div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.inner {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}
.row-section > div {
	flex: 1;
	min-width: 250px;
}
.row-section {
    display: flex;
    justify-content: space-between;
    flex: 1;
    min-width: 100%;
    flex-direction: row !important;
    flex-wrap: wrap;
}
.footer-callout {
	display: flex;
	justify-content: flex-start;
	flex: 1;
	position: fixed;
	bottom: 5px;
	left: 5px;
	right: 5px;
}
.content-div {
	background-color: #fff;
	border-radius: 5px;
  margin-bottom: 20px;
  margin-top: 20px;
}
#home-wrapper .content-div {
	background: none !important;
}
#landing-page {
	color: #fff;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 15px;
	transition-duration: 10s;
}
#landing-page .row-section {
    display: flex;
    justify-content: space-between;
    flex: 1;
    min-width: 100%;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 10px;
    background-color: #0006;
}
#video-page {
  background-color: #0006;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 15px;
  color: #fff;
}
#latest-page {
  background-color: #0006;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 15px;
  color: #fff;
}
#services-page {
  
	background-color: #0006;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 15px;
  color: #fff;
}
#clients-page {
	background-color: #0006;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 15px;
  color: #fff;
}
#credentials-page {
	background-color: #0006;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 15px;
  color: #fff;
}
.next-container {
	min-width: 100%;
	display: flex;
	padding: 20px;
	justify-content: center;
	flex: 1;
	box-sizing: border-box;
}
.top-spacer {
	min-height: 50px;
}
.full-height {
	min-height: calc(100vh - 110px);
	display: flex;
	align-content: center;
	flex-wrap: wrap;
}

.profile-img  img {
	max-height: 100%;
  min-height: 100%;
  height: 90vh;

}
.footer-wrapper {
	padding-bottom: 50px !important;
}
.head-wrapper {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 10;
}
.modal-wrapper {
	background: #0009;
	backdrop-filter: blur(10px);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 11;
	padding: 20px;
}
.modal-container {
	display: flex;
	flex-direction: column;
	min-width: 100%;
	box-sizing: border-box;
	background: linear-gradient(#efefef, #fff, #efefef);
	top: 5px;
	bottom: 5px;
	border-radius: 5px;

}
.align-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.modal-wrapper {
	display: none;
}
.modal-content{
    min-height: calc(100vh - 181px);
	max-height: calc(100vh - 181px);
	overflow-y: scroll;
}

.modal-content::-webkit-scrollbar {
    display: none;
}

.modal-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.modal-header .row-section > div {
    flex: 1;
    min-width: auto;
}
.modal-footer .row-section > div {
    flex: 1;
    min-width: auto;
}
.side-bar {
	position: fixed;
	display: flex;
	flex-direction: column;
	right: 5px;
	top: 40%;
}
.side-bar {
    position: fixed;
    display: flex;
    flex-direction: column;
    right: 5px;
    top: 40%;
    background-color: #fff;
    text-align: center;
    box-shadow: 1px 1px 3px #0002;
}
.rounded {
	border-radius: 5px;
}
.full-width {
	min-width: 100% !important;
}
.padding-sm {
	padding: 10px;
	box-sizing: border-box;
}
.service-content {
	margin-bottom: 20px;
}
.modal-content .padding-sm {
	padding: 10px 5px;
	box-sizing: border-box;
}
.v-padding-sm {
	padding: 10px 0;
	box-sizing: border-box;
}
.h-padding-sm {
	padding: 0 10px;
	box-sizing: border-box;
}
.no-width > div {
	min-width: auto !important;
}
.col-items {
	flex-direction: column;
	align-items: flex-start;
}
.feature-section {
    min-height: 450px;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #0003;
    background-position: top center;
    background-size: cover;
}
.modal-wrapper-graphic {
	display: none;
}
.modal-wrapper img {
	border-radius: 5px;
	box-shadow: 1px 1px 2px #0003
}
.shadow-sm {
	box-shadow: 1px 1px 2px #0003
}
video {
	border-radius: 5px;
	box-shadow: 1px 1px 2px #0003
}
.modal-header {
    border-bottom: solid thin #0003;
    box-shadow: 0px 1px 3px #0002;
}
.modal-footer {
    border-top: solid thin #0003;
    box-shadow: 0px -1px 3px #0002;
}
.hotspot {
	cursor: pointer;
}
.modal-header h2 {
    font-size: 23px;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 28px;
}
.autoflex {
    flex: auto !important;
    max-width: 20px;
}
.card-items > div {
background: #0003;
box-sizing: border-box;
border-bottom: solid thin #fff2;
padding: 10px;
}
.card-items > div:hover {
  background: #0008;
  box-sizing: border-box;
  border-bottom: solid thin #fff;
  padding: 10px;
  transition-duration: 0.5s;
  }
.content-div h2 {
    font-size: 30px;
    margin-top: 25px;
    margin-bottom: 25px;
    line-height: 4.5vw;
    transition-duration: 0.5s;
}
.head-wrapper {
  color: #fff;
  background: #000;
  box-shadow: 0px 3px 3px#0003;
}
.footer-wrapper {
    color: #fff;
    background: #000;
    box-shadow: 0px -3px 3px#0003;
}
.footer-wrapper a {
	color: #ccc;
	transition-duration: 0.5s;
}
.footer-wrapper a:hover {
	color: #fff;
	transition-duration: 0.5s;
}
.callout-detail {
    background: #fff;
    border-radius: 5px;
    margin-left: 5px;
	box-shadow: 1px 1px 3px #0003;
	border: solid thin #0003;
}
#toggle-footer-callout .fa {
	color: #980086;
}
#toggle-footer-callout  {
    background: #fff;
    border-radius: 5px;
	box-shadow: 1px 1px 3px #0003;
	border: solid thin #ccc;
	transition-duration: 0.5s;
}
#toggle-footer-callout:hover  {
	background-color: #980086;
    color: #fff;
    border-radius: 5px;
	box-shadow: 1px 1px 3px #0003;
	border: none;
	transition-duration: 0.5s;
}
#toggle-footer-callout:hover > .fa {
	color: #fff;
}
.nav-item {
	flex: 1;
	background-color: #980086;
	text-align: center;
	transition-duration: 0.5s;
}
.nav-item a {
	color: #fff;
}
.nav-item:hover {
	color: #fff;
	background-color: #CB00B3;
	transition-duration: 0.5s;
}
.nav-item:first-child {
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}
.nav-item:last-child {
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
}
.v-margin-sm {
	margin: 10px 0 !important;
}
.col-items {
	display: flex;
	flex-direction: column !important;
	width: 100%;
}
.margin-sm {
	margin: 5px;
}
.cta-white {
    background: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #0003;
    border: solid thin #ccc;
    transition-duration: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px !important;
}
.cta-white .fa {
  margin-right: 5px;
}
.cta-white:hover  {
	background-color: #0003;
    color: #fff;
    border-radius: 5px;
	box-shadow: 1px 1px 3px #0003;
	border: solid thin #fff;
	transition-duration: 0.5s;
}
.cta-white:hover > .fa {
	color: #fff;
}
#clients-page .row-section > div {
    flex: 1;
    min-width: 200px;
    justify-content: center;
    display: flex;
}
#clients-page .row-section > div img {
    filter: grayscale(1);
  	transition-duration: 0.5s;
}
#clients-page .row-section > div img:hover {
    filter: grayscale(0);
  	transition-duration: 0.5s;
}
.card-style {
  border: solid thin #0001;
  box-shadow: 1px 1px 3px #0003;
  border-radius: 5px;
  margin: 2px;
}
.white-text {
  color: #fff !important;
}
.feature-multimedia-social {
  background-image: url(images/multimedia-social.jpg);
  background-repeat: no-repeat;
}
.feature-multimedia-brand {
  background-image: url(images/fed-zoe.jpg);
  background-repeat: no-repeat;
}
.feature-multimedia-graphic {
  background-image: url(images/multimedia-graphic.jpg);
  background-repeat: no-repeat;
}
.feature-multimedia-motion {
  background-image: url(images/multimedia-motion.jpg);
  background-repeat: no-repeat;
}
.feature-product-absa {
  background-image: url(images/product-absa.jpg);
  background-repeat: no-repeat;
}
.feature-product-paid {
  background-image: url(images/product-paid.jpg);
  background-repeat: no-repeat;
}
.feature-product-demobank {
  background-image: url(images/product-demobank.jpg);
  background-repeat: no-repeat;
}
.feature-product-axon {
  background-image: url(images/product-axon.jpg);
  background-repeat: no-repeat;
}
.feature-product-sassa {
  background-image: url(images/product-sassa.jpg);
  background-repeat: no-repeat;
}
.feature-fed-mbd {
  background-image: url(images/fed-mbd.jpg);
  background-repeat: no-repeat;
}
.feature-fed-ch {
  background-image: url(images/fed-ch.jpg);
  background-repeat: no-repeat;
}
.feature-fed-axon {
  background-image: url(images/fed-axon.jpg);
  background-repeat: no-repeat;
}
.feature-fed-myhse {
  background-image: url(images/fed-myhse.jpg);
  background-repeat: no-repeat;
}
.feature-fed-zoe {
  background-image: url(images/fed-zoe.jpg);
  background-repeat: no-repeat;
}
.feature-fed-vendtech {
  background-image: url(images/fed-vendtech.jpg);
  background-repeat: no-repeat;
}
.brand-colors {
  padding: 20px;
  min-width: 100%;
  box-sizing: border-box;
  display: flex;
  border-radius: 5px;
  margin-bottom: 5px;
  box-shadow: 1px 1px 3px #0003;
}
.graph-percentage {
  min-width: 100%;
  box-sizing: border-box;
  display: flex;
  border-radius: 5px;

  flex-direction: column;
}
.graph-percentage-item {
    padding: 5px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff;
    box-shadow: 1px 1px 3px #0003;
}
.mbd-color1 {
  background-color: #0A2A45;
}
.mbd-color2 {
  background-color: #007482;
}
.mbd-color3 {
  background-color: #60AF62;
}
.mbd-color4 {
  background-color: #ccc;
}
.mbd-font-color h1, h2, h3, h4 {
  color: #0A2A45 ;
}

.ch-color1 {
  background-color: #04345A;
}
.ch-color2 {
  background-color: #0BAE8F;
}
.ch-color3 {
  background-color: #0DF579;
}
.ch-color4 {
  background-color: #ccc;
}
.ch-font-color h1, h2, h3, h4 {
  color: #04345A ;
}

.axon-color1 {
  background-color: #6768AF;
}
.axon-color2 {
  background-color: #72CDE0;
}
.axon-color3 {
  background-color: #7B7B7B;
}
.axon-color4 {
  background-color: #F7941D;
}
.axon-font-color h1, h2, h3, h4 {
  color: #04345A ;
}

.zoe-color1 {
  background-color: #0A0C18;
}
.zoe-color2 {
  background-color: #453F61;
}
.zoe-color3 {
  background-color: #625291;
}
.zoe-color4 {
  background-color: #efefef;
}
.zoe-font-color h1, h2, h3, h4 {
  color: #0A0C18 ;
}

.vendtech-color1 {
  background-color: #222222;
}
.vendtech-color2 {
  background-color: #C82037;
}
.vendtech-color3 {
  background-color: #F72B1E;
}
.vendtech-color4 {
  background-color: #efefef;
}
.vendtech-font-color h1, h2, h3, h4 {
  color: #222222 ;
}

.paystar-color1 {
  background-color: #DB0044;
}
.paystar-color2 {
  background-color: #E12659;
}
.paystar-color3 {
  background-color: #FF3A00;
}
.paystar-color4 {
  background-color: #efefef;
}
.paystar-font-color h1, h2, h3, h4 {
  color: #DB0044 ;
}

.paid-color1 {
  background-color: #1D284E;
}
.paid-color2 {
  background-color: #3E55A1;
}
.paid-color3 {
  background-color: #05EAEA;
}
.paid-color4 {
  background-color: #efefef;
}
.paid-font-color h1, h2, h3, h4 {
  color: #1D284E ;
}

.demo-color1 {
  background-color: #000000;
}
.demo-color2 {
  background-color: #113B68;
}
.demo-color3 {
  background-color: #175495;
}
.demo-color4 {
  background-color: #17E3FF;
}
.demo-font-color h1, h2, h3, h4 {
  color: #000000 ;
}

.sassa-color1 {
  background-color: #007A2E;
}
.sassa-color2 {
  background-color: #FCB900;
}
.sassa-color3 {
  background-color: #DD1B17;
}
.sassa-color4 {
  background-color: #272210;
}
.sassa-font-color h1, h2, h3, h4 {
  color: #007A2E ;
}

.barlow-font {
  font-family: 'Barlow', sans-serif !important;
}
.sora-font {
  font-family: 'Sora', sans-serif !important;
}

.open-sans-font {
  font-family: 'Open Sans', sans-serif !important;
}
.no-shadow {
  box-shadow: none !important;
}

#content-div h1,
h2,
h3,
h4,
h5,
h6 {
	text-transform: uppercase;
	font-weight: normal;
  color: #777;
  line-height: 64px;
}

.introjs-helperLayer {
    background: transparent !important;
}
.introjs-overlay {
    background: #0008 !important;
}
.white-text {
  color: #fff !important;
}
.colored-text-dark {
  animation: colored-text-dark 15s infinite;
}
@keyframes colored-text-dark {
  0% { color: #333; }
  20% { color: #DE3AED; }
  40% { color: #A09CF1; }
  90% { color: #D2D1F2; }
  100% { color: #333; }

}
.colored-text-dark:hover {
  color: #fff !important;
}
.colored-text {
  animation: colored-text 15s infinite;
}
@keyframes colored-text {
  0% { color: #fff; }
  20% { color: #DE3AED; }
  40% { color: #A09CF1; }
  90% { color: #D2D1F2; }
  100% { color: #fff; }

}
.colored-bg {
  animation: colored-bg 15s infinite;
}
@keyframes colored-bg {
  0% { background-color: #fff; }
  20% { background-color: rgb(178, 199, 247); }
  40% { background-color: #A09CF1; }
  90% { background-color: #D2D1F2; }
  100% { background-color: #fff; }

}
#credentials-page .card-style {
transition: 2s;
}
#credentials-page .card-style:hover {
  background-color: #890D94;
  color: #fff;
  transition: 1s;
  transition-delay: 0.5s;
}
#credentials-page .card-style:hover h4 {
  color: #fff;
  transition: 1s;
}
.profile-img {
    margin-bottom: -6px;
}
.modal-content .row-section > div {
  margin: 5px;
}
.white-bg {
  background-color: #fff;
}
#credentials-page .card-style:first-child:hover {
  background-color: #7676BB;
}
#credentials-page .card-style:nth-child(2):hover {
  background-color: #482094;
}
.feature-section {
  background-size: 100%;
  background-position: top center;
  transition-duration: 1s;
}
.feature-section:hover {
  background-size: 104%;
  background-position: top center;
  transition-duration: 1s;
}
.move-container {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100vw;
    min-height: 100vh;
}
.move1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    margin-top: 0;
    float: left;
    transform: rotate(45deg);
}
.move2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    margin-top: 0;
    float: left;
    transform: rotate(45deg);
}
.move-element {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    height: 250px;
    width: 250px;
    border-radius: 150px;
    background-color: #A09CF1;
    opacity: 0.5;
    animation: move-animation 10s infinite;
    top: 100px;
    animation-direction: alternate;
    margin-top: -1200px
}
@keyframes move-animation {
  0% {margin-top: -1200px;background-color: #fff;}
  25% {height: 250px;background-color: #DE3AED;}
  50% {height: 500px;background-color: #A09CF1;}
  75% {height: 250px;background-color: #D2D1F2;}
  100% {margin-top: 1200px;color: #fff; }
}


.move-element2 {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    height: 300px;
    width: 300px;
    border-radius: 150px;
    background-color: none;
    opacity: 0.5;
    animation: move-animation2 15s infinite;
    animation-delay: 1s;
    top: 150px;
    animation-direction: alternate;
    border: solid medium #A09CF1;
}
@keyframes move-animation2 {
  0% {margin-top: -1200px;}
  25% {height: 300px;}
  50% {height: 500px;}
  75% {height: 300px;}
  100% {margin-top: 1200px;}
}

.move-element3 {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 200px;
  border-radius: 150px;
  background-color: none;
  opacity: 0.5;
  animation: move-animation3 20s infinite;
  animation-delay: 1s;
  left: 150%;
  animation-direction: alternate;
  border: solid thin #A09CF1;
  background-color: #fff;
}
@keyframes move-animation3 {
0% {margin-top: -1200px;}
25% {height: 300px;}
50% {height: 500px;}
75% {height: 300px;}
100% {margin-top: 2000px;}
}

.move4 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  margin-top: 0;
  float: left;
  transform: rotate(45deg);
}

.move-element4 {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  height: 900px;
  width: 400px;
  border-radius: 300px;
  background-color: none;
  opacity: 0.5;
  animation: move-animation4 20s infinite;
  animation-delay: 1s;
  left: 150%;
  animation-direction: alternate;
  border: solid thin transparent;
  background-color: #fff;
}
@keyframes move-animation4 {
0% {margin-bottom: -1200px;}
25% {height: 800px;}
50% {height: 500px;}
75% {height: 800px;}
100% {margin-bottom: 2000px;}
}

.modal-wrapper-brand .stylescape {
  margin: 5px 0 !important;
}
.justified-row {
  justify-content: space-between;
  display: flex;
  flex: 1;
}
.center-content {
  display: flex;
  justify-content: center;
}

.close-brand {
  justify-content: end;
}
#loader {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-icon {
  border: 5px solid #fff;
  border-radius: 50%;
  border-top: 5px solid #000;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

.loader-text {
  margin-left: 10px;
  color: #fff;
  font-size: 24px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.landing-bg {
  display: flex;
  min-width: 100vw;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-image: linear-gradient(45deg, #482094, #860D94);
  animation: langing-bg 20s infinite
}
@keyframes langing-bg {
  0% { background-size: 100%; }
  50% { background-size: 200%; }
  100% { background-size: 100%; }
}
.landing-content {
  width: 100%;
  max-width: 400px;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapperItem {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 641px !important;
  border-radius: 5px;
}
#clients-page .row-section > div {
  border-radius: 10px !important;
  background-color: #fff;

}
#clients-page .row-section {
  gap: 20px;
}
.featured-project {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  box-sizing: border-box;
  flex: 1;
  color: #333;
}
.feature-gap {
  gap: 10px;
}

.featured-project img {
  border-radius: 5px;
}

.blur-bg {
  backdrop-filter: blur(15px);
  
  
}
.custom-border {
  border: solid thin transparent;
  transition-duration: 1s;
}
@keyframes panel-border {
  0% {border: solid thin #fff;}
  25% {border: solid thin #DE3AED;}
  50% {border: solid thin #A09CF1;}
  75% {border: solid thin #D2D1F2;}
  100% {border: solid thin #fff; }
}
.custom-border:hover {
  transition-duration: 1s;
  animation: panel-border 10s infinite;
}
.padding-med {
  padding: 30px;
}
.feature-icon {
  font-size: 150px !important;
}
.arrow-down {
  font-size: 30px !important;
}