/*All of the core Brand related (colors, font sizes, fonts, etc.) go here.*/

/*All Font families go here
font-family: 'Red Hat Display', sans-serif;
*/

body /*also styles p?*/{
  color:#000000a1;
  font-weight:400;
  font-size:1.1rem;
}

h1, h2, h3, h4{
  font-family: 'Red Hat Display', sans-serif;
  color:#000;
  font-weight:400;
  letter-spacing:1px;
}
h1{font-size:3.4rem;}
h2{font-size:2.5rem;}
h3{
  font-size: 1.4rem;
  text-transform: none;
  letter-spacing: 0px;
  font-weight:300;
}

a,a:visited,a:hover{
  color:#7F20F8;
  font-weight:bold;
  text-decoration:none;
}

header {
  position: fixed;
  background: #fff;
  color: #fff;
  width: 100%;
  z-index: 200;
  padding:0 20px;
}

.sticky-header {box-shadow: 0px -30px 30px 10px #000;}

.logo {
  display: grid;
  align-items: center;
  font-family: 'Red Hat Display', sans-serif;
  color: #000000bf;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.6rem;
  background:url("../images/logo.svg") no-repeat center center;
  background-size:contain;
  width:250px;
  min-height:25px;
}

.logo img{
  width:160px;
}

main{min-height:80vh;}

/*underlay bg image with overlay transparent color*/
.underlay{}
.overlay{
  background:#00202fcc /*#440AFFCF*/;
}

.display-none{display:none;}


/**CTA Contact Button**/
.cta-button {}
.cta-button a
,.cta-button a:hover
,.cta-button a:visited{
  color: #fff;
  display:block;
  text-decoration: none;
  background: #7F20F8;
  padding: 10px 35px;
  font-family: 'Red Hat Display', sans-serif;
  transition: all ease .2s;
  font-weight: bold;
  border-radius: 15px;
  font-weight: 600;
  width:max-content;
  margin:0 auto;
}

.cta-button a i.right-arrow {
  width: 0;
  height: 17px;
  background: url(../images/right-arrow.svg)no-repeat right center;
  background-size: contain;
  top: 3px;
  position: relative;
  opacity:0;
  padding-left:0;
  display:inline-block;
  
  animation:movearrowback .2s;
  transition: all ease .2s;
}
.cta-button a:hover i.right-arrow {
  width:21px;
  animation:movearrow .2s;
  opacity:1;
  padding-left:70px;
  transition:all ease .2s;
}

@keyframes movearrow{
  0% {width:0;opacity:0;padding-left:0;}
  100% {width:21px;opacity:1;padding-left:70px;}
}
@keyframes movearrowback{
  0% {width:21px;opacity:1;padding-left:70px;}
  50% {opacity:0;}
 100% {width:0;opacity:0;padding-left:0;}
}

.cta-button a:hover{
  transition:all ease .2s;
}

/**CTA FORM Styles**/

.cta-form{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:40px;
  padding-top:50px;
  font-family: 'Red Hat Display', sans-serif;
}
.cta-form input
,.cta-form select{
  width:100%;
  background:#EEEEEE;
  border:none;
  padding:15px 15px;
  color:#000000a3;
  font-size:.9rem;
  border-radius:50px;
  font-family: 'Red Hat Display', sans-serif;
}
.cta-form input[type=submit]{
  font-family: 'Red Hat Display', sans-serif;
  background:#000;color:#fff;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  margin-top:30px;
}

.cta-form label {
  font-family: 'Red Hat Display', sans-serif;
  display: block;
  font-size: .9rem;
  color: #000000a3;
  padding-bottom: 10px;
  font-weight:normal;
}

.cta-row{background:#fff;}
.cta-row .box-inner {
  padding-top: 50px;
  padding-bottom: 50px;
  min-height: 40vh;
  display: grid;
  place-content: center;
}
.cta-row h2{margin-top:0;text-align:center;}

.cta-row-content a{color:#000;font-weight:bold;text-decoration:none;}

/*Transparent Form styles*/

.transparent-form-area{
  min-height:100vh;
}
.transparent-form{
  max-width:700px;
}
.transparent-form input
,.transparent-form input:focus{
  width:100%;
  border:none;
  border-radius:5px;
  background:#74747414;
  color:#000000b0;
  font-size: 0.9rem;
  padding:5px 15px;
  text-transform:none;
  font-family:inherit;
  line-height:40px;
}

.transparent-form label {
  color: #000000a6;
  font-size: 1rem;
  font-weight:normal;
  margin-bottom:5px;
  display:block;
}

.transparent-form textarea {
  border: none;
  width:100%;
  min-height: 100px;
  border-radius: 5px;
  background: #74747414;
  color: #000000b0;
  font-size: 1.0rem;
  padding: 10px 20px;
  font-family:inherit;
}

.transparent-form input[type="submit"]
, .transparent-form input[type="submit"]:hover {
  padding: 5px 50px;
  background: #7F20F8;
  color: #fff;
  font-size: 1.1rem;
  line-height: 40px;
  font-family: 'Red Hat Display', sans-serif;
  cursor: pointer;
  transition: all ease .15s;
  border: none;
  margin-top: 20px;
  border-radius: 15px;
  display: block;
  width: max-content;
}
.transparent-form .submit:hover {}

.transparent-form .submit-row{display:grid;place-items:center;}

/*Footer styles*/

footer * {
  margin: 0;
  font-size:1rem;
}

footer.box{color:#ffffffde;}
footer .box-inner{padding: 180px 20px;}
footer .overlay {
  background: #7F20F8C4;
  z-index: 100;
  position: relative;
}
footer .underlay {
  background: url(../images/footer-bg.jpg)no-repeat center;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
}

footer .grid{
  grid-template-areas:"col1 col2 col3";
}

footer .col1{grid-area:col1;}
footer .col2{grid-area:col2;}
footer .col3{grid-area:col3;}

footer h3{
  color: #fff;
}
footer p {
  color: #fff;
  font-weight: 300;
}
footer a,footer a:visited,footer a:hover{
  color:#fff;
  text-decoration:none;
  font-weight:600;
}
footer .contact-rows{
  display:grid;
  grid-template-columns:max-content max-content;
  height:max-content;
  justify-content:right;
  grid-gap:20px;
}
footer .contact-row {
  display: grid;
  grid-gap: 15px;
}

.footer-social{display:flex;gap:10px;float:none;}
.footer-social a{
  display:grid;
  justify-content:center;
  align-content:center;
  text-decoration:none;
  color:#00000061;
  font-size:1.2rem;
  padding:3px;
  text-align:center;
}
.footer-social a svg{height:23px;}

footer ul{
  list-style-type: none;
  display:grid;
  grid-gap:15px;
}

.super-footer{background:#282828;padding:5px 20px;font-size:0.8rem;color:#ffffffa6;}
.super-footer a, .super-footer a:visited, .super-footer a:hover {
  color: #FFFC;
  font-weight: 600;
  text-decoration: none;
  transition:all linear .15s;
}
.super-footer a:hover {
  color: #7f20f8;
}

.contact-col {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 10px;
}

.contact-col i.mail
,.contact-col i.phone
,.contact-col i.message
,.contact-col i.location{
  display: inline-block;
  width:20px;
  height:24px;
  background-color:#ffffff42;
}
.contact-col i.mail{mask: url(../images/mail.svg) no-repeat center;}
.contact-col i.phone{mask:url(../images/phone.svg) no-repeat center;}
.contact-col i.message{mask:url(../images/message.svg) no-repeat center;}
.contact-col i.location{mask:url(../images/globe.svg) no-repeat center;}



#super-footer{
  background:#181818;
  padding:10px 20px;
  color:#ffffff8f;
  font-size:0.6rem;
  letter-spacing:1px;
  text-align:center;
}

#super-footer p {
  color: #ffffff94;
  font-weight: 500;
}

@media (max-width:800px),(max-device-width: 800px)
{
  header{padding:0;}
  .header-area{padding:20px;}
  header .grid-lg-sm-sm{grid-template-columns:1fr max-content;}
  .logo, .sticky-transparent .logo{padding:0px;background-position:left center;}

  h1{font-size:2.2rem;}
  h2{font-size:1.9rem;}
  h3{font-size:1.2rem;}

  .text-align-center{text-align:center;}

  .transparent-form{width:100%;}

  .cta-form{grid-template-columns:1fr;grid-gap:10px;}

  /*.footer-contact-row{text-align:center;}
  .footer-contact-row .line {margin-left: calc(50% - 25px);}
  .footer-social{float:none;place-content:center;}*/

  footer .box-inner{padding:100px 50px;}
  footer .grid-col-2{
    grid-template-columns:1fr;
    padding-bottom:50px;
    grid-gap:20px;
  }

  footer .grid{
    grid-template-areas:"col1" "col3" "col2";
  }

  footer .contact-rows{justify-content:left;}
  footer ul{padding:0;}
  footer .col2 {padding-top: 50px;}
}