#banner {margin: 0;padding: 0;width: 100%;height: 100vh;background: linear-gradient(300deg,#a70052,#430171,#a70052,#000052,#2b00ba);background-size: 300% 300%;animation: banner-animation 12s ease infinite;display: flex;align-items: center;flex-wrap: wrap;overflow: hidden;}#banner .bannerContent {background: url(../images/banner-content-vector.png) no-repeat center left;background-size: contain;position: relative;padding: 80px 0;}#banner .bannerContent label {font-weight: 700;font-size: 32px;line-height: 42px;color: rgba(255, 255, 255, 0.8);margin: 0 0 16px 0;padding: 0 0 10px 0;background: #131a43;position: relative;z-index: 23;}#banner .bannerContent h1 {font-weight: 800;font-size: 52px;line-height: 80px;color: #fff;margin: 0;padding: 0 0 20px 0;position: relative;}#banner .bannerContent h1 span {padding: 0 20px;font-size: 78px;}#banner .bannerContent h1 em span {font-style: normal;color: #fff;display: inline-flex;align-items: center;flex-wrap: wrap;background: rgba(255, 255, 255, 0.1);padding: 0 20px;border-radius: 10px;font-size: 52px;font-weight: 600;}#banner .bannerContent h2 {font-weight: 600;font-size: 32px;line-height: 42px;color: #fff;margin: 0;padding: 0 0 20px 0;}#banner .bannerContent a {padding: 14px 30px;background: #5431B9;border-radius: 100px;display: inline-flex;align-content: center;flex-wrap: wrap;position: relative;transition: all ease-in-out 0.3s;max-width: 550px;}#banner .bannerContent a label {background: none;font-weight: 300;font-size: 20px;line-height: 30px;color: #fff;margin: 0;padding: 0;width: 100%;}#banner .bannerContent a span {font-weight: 600;font-size: 32px;line-height: 32px;color: #fff;padding: 4px 0 0 0;width: 100%;}#banner .bannerContent a i.linkArrow {width: 80px;height: 80px;position: absolute;right: 9px;top: 7px;background: #fff;border-radius: 100%;display: flex;align-items: center;flex-wrap: wrap;justify-content: center;transition: all ease-in-out 0.3s;}#banner .bannerContent a i.linkArrow svg path {fill: #5431B9;transition: all ease-in-out 0.3s;}#banner .bannerContent a:hover {background: #fff;}#banner .bannerContent a:hover label, #banner .bannerContent a:hover span {color: #5431B9;}#banner .bannerContent a:hover i.linkArrow {background: #5431B9;}#banner .bannerContent a:hover i.linkArrow svg path {fill: #fff;}.grid-wrapper {position: absolute;width: 100%;height: 100%;left: 50px;top: 50px;opacity: 0.75;}.grid-wrapper .dot .innerCircle {width: 10px;height: 10px;border-radius: 50%;background: #838bb7;position: absolute;z-index: 2;left: 50%;top: 50%;transform: translate(-50%, -50%);}.grid-wrapper .dot {background: #3e4464;content: "";width: 20px;height: 20px;position: absolute;border-radius: 100%;z-index: 2;}.grid-wrapper svg.line {position: absolute;z-index: 1;pointer-events: none;}

@keyframes banner-animation {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

#bannerTypewriter {border-right: 5px solid #fff; display: inline-block; animation: blink 0.7s steps(1) infinite;}

@keyframes blink {
  50% {border-color: transparent;}
}

/**** media queries ****/
@media only screen and (min-width: 0px) and (max-width: 575px) {
  #banner {height: auto;padding: 40px 0;}#banner .grid-wrapper {display: none;}#banner canvas {display: none !important;}#banner .bannerContent h1 {font-weight: 700;font-size: 32px;line-height: 48px;}#banner .bannerContent h1 span {font-size: 52px;}#banner svg.strokeAni {left: 105px !important;top: -19px !important;width: 180px;height: 120px;}#banner .bannerContent h1 em span {padding: 4px 10px;font-size: 22px;line-height: 32px;}#banner .bannerContent h2 {font-size: 22px;line-height: 32px;}#banner .bannerContent a {padding: 4px 20px;max-width: 370px;}#banner .bannerContent a label {font-size: 16px;line-height: 26px;}#banner .bannerContent a span {font-size: 21px;line-height: 32px;padding: 0;}#banner .bannerContent a i.linkArrow {width: 50px;height: 50px;top: 50%;transform: translateY(-50%);}#banner .bannerContent a svg {width: 30px !important;height: 30px !important;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  #banner {height: auto;padding: 40px 0;}#banner .grid-wrapper {display: none;}#banner canvas {display: none !important;}#banner .bannerContent h1 {font-weight: 700;font-size: 42px;line-height: 58px;}#banner .bannerContent h1 span {font-size: 52px;}#banner svg.strokeAni {left: 140px !important;top: -19px !important;width: 200px;height: 140px;}#banner .bannerContent h1 em span {padding: 0 15px;font-size: 32px;line-height: 52px;}#banner .bannerContent h2 {font-size: 28px;line-height: 38px;}#banner .bannerContent a {padding: 8px 25px;max-width: 410px;}#banner .bannerContent a label {font-size: 18px;line-height: 26px;}#banner .bannerContent a span {font-size: 24px;line-height: 32px;padding: 0;}#banner .bannerContent a i.linkArrow {width: 60px;height: 60px;top: 50%;transform: translateY(-50%);}#banner .bannerContent a svg {width: 30px !important;height: 30px !important;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .grid-wrapper {display: none;}#banner {padding: 80px 0;}#banner canvas {display: none !important;}#banner .bannerContent h1 {font-size: 42px;line-height: 58px;}#banner .bannerContent h1 span {font-size: 62px;line-height: 72px;}#banner svg.strokeAni {left: 153px !important;top: -20px !important;width: 200px;height: 160px;}#banner .bannerContent h1 em span {font-size: 36px;}#banner .bannerContent a {padding: 9px 30px;max-width: 500px;}#banner .bannerContent a label {font-size: 18px;}#banner .bannerContent a span {font-size: 28px;line-height: 32px;}#banner .bannerContent a i.linkArrow {width: 70px;height: 70px;}
}

@media only screen and (min-width: 992px) and (max-width: 1399px) {
   #banner .bannerContent h1 {font-size: 28px;line-height: 38px;font-weight: 600;min-height: 159px;}#banner .bannerContent h1 span {font-size: 41px;font-weight: 800;padding: 0 12px;}#banner .bannerContent h1 em {height: 38px;}#banner svg.strokeAni {top: -24px !important;left: 68px !important;width: 180px;height: 120px;}#banner .bannerContent h1 em span {font-size: 21px;margin-top: 20px;}#banner .bannerContent h2 {font-size: 20px;line-height: 30px;padding-right: 100px;font-weight: 400;}#banner .bannerContent a {max-width: 340px;padding: 8px 20px;}#banner .bannerContent a label {font-size: 14px;line-height: 20px;}#banner .bannerContent a span {font-size: 20px;line-height: 20px;}#banner .bannerContent a i.linkArrow {width: 50px;height: 50px;top: 5px;right: 5px;}#banner .bannerContent a i.linkArrow svg {width: 30px;}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  #banner .bannerContent {padding: 80px 100px 80px 0;}#banner .bannerContent h1 {font-size: 38px;line-height: 52px;padding-bottom: 30px;}#banner .bannerContent h1 span {font-size: 62px;}#banner .bannerContent h1 em {margin-top: 20px;display: inline-flex;height: 52px;}#banner .bannerContent h1 em span {font-size: 32px;}#banner .bannerContent h1 svg {left: 136px !important;top: -29px !important;width: 190px;height: 150px;}#banner .bannerContent h2 {font-size: 28px;}#banner .bannerContent a {padding: 8px 26px;max-width: 440px;}#banner .bannerContent a label {font-size: 18px;line-height: 26px;}#banner .bannerContent a span {font-size: 26px;line-height: 26px;}#banner .bannerContent a i.linkArrow {width: 60px;height: 60px;right: 7px;top: 6px;}#banner .bannerContent a i.linkArrow svg {width: 30px;}
}