@import "./assets/GTWalsheimPrp-Font/stylesheet.css";

:root {
  --persian-blue: #192cd1;
  --mid-slate-blue: #707eff;
  --max-blue-purple: #a4adff;
  --magnolia: #f6f0ff;
  --mangolia-dark: #e5e3ed;
  --yellow-green: #1ab700;
  --int-orange: #b70000;
  --cultured: #f5f5f5;
  --cultured-dark: #f0f0f0;
  --light-gray: #cdcdcd;
}

#logo {
  width: 15vw;
  height: auto;
}

#phone {
  width: 37vh;
  height: auto;
}

body {
  margin: 0px;
  background-color: var(--persian-blue);
  font-family: 'GT Walsheim Pro';
  box-sizing: border-box;
}

.circle {
  width: 37vw;
  height: 37vw;
  background-color: var(--mangolia-dark);
  border-radius: 50%;
  position: fixed;
  top: 80vh;
  left: -15vw;
  /* visibility: hidden; */
}

/* nav */
nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 3.1vh 3.4vw;
  margin-bottom: 0px;
}

nav > div {
  /* border: 1px solid; */
  font-size: 2.8vh;
  font-weight: 300;
  display: flex;
  align-items: center;
  color: white;
}

nav .logo,
.form {
  flex: 1;
}

nav .links {
  flex: 2;
  display: flex;
  align-items: center;
  gap: 2.6vw;
}
nav .links a {
  color: #fff;
  text-decoration: none;
}

nav .form {
  display: flex;
  justify-content: flex-end;
  gap: 2.7vw;
  align-items: center;
}

nav .form a {
  text-decoration: none;
  color: #fff;
}

nav .form a.signup {
  padding: 1.7vh 2vw;
  background-color: white;
  color: var(--persian-blue);
}

nav.sm {
  display: none;
}

.nav-toggle {
  width: 5vh;
  height: 5vh;
  padding: 0px;
}
/* logo */
.logo img {
  max-width: 15vw;
}

/* nav tab media queries */
@media screen and (max-width: 820px) {
  nav {
    /* display: block; */
    margin: 20px;
  }

  .logo img {
    max-width: 90%;
  }
  nav div {
    flex: 1;
    font-size: 1.8vh;
    font-weight: 300;
    /* border: 1px solid; */
  }

  nav .links {
    flex: 2;
    justify-content: center;
    padding: 0px 10px;
  }
  nav .form {
    gap: 2vw;
  }
}

/* nav mobile media queries */
@media screen and (max-width: 480px) {
  nav.lg {
    display: none;
  }
  nav.sm {
    display: flex;
  }
  nav {
    /* display: block; */
    margin: 15px;
  }

  nav.sm a{
    text-decoration: none;
  }

  nav.mobile {
    display: block;
  }

  nav div {
    flex: 1;
    font-size: 1.5vh;
    font-weight: 500;
    align-items: center;
    /* border: 1px solid; */
  }

  nav.links,
  .logo,
  form {
    flex: 1;
  }

  nav .links {
    /* gap: 2.3px; */
    justify-content: space-around;
    display: none;

    margin: 2px;
  }

  .logo img {
    max-width: 90%;
  }
  .signup {
    padding: 1vw;
  }
  nav .form {
    gap: 3vw;
  }
  .nav-toggle {
    background: none;
    border: none;
    padding: 2px;
    background-color: white;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
  }
  .nav-toggle-icon {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  #nav-toggle-close {
    display: none;
  }

  .nav-dropdown {
    background-color: white;
    box-shadow: 0px 2px 3px #707effa9;
    padding: 10px;
    border-radius: 0px 0px 10px 10px;
    color: var(--persian-blue);
    position: absolute;
    width: calc(100% - 20px);
    display: none;
  }

  .nav-dropdown ul {
    list-style: none;
    padding: 0px;
  }

  .nav-dropdown li.link {
    padding: 10px;
  }
  .nav-dropdown li {
    display: flex;
    justify-content: space-between;
  }
  .nav-dropdown li a{
    text-decoration: none;
    color: var(--persian-blue);
  }
  .nav-dropdown li span {
    padding: 10px;
    flex: 1;
  }
}
@media screen and (min-width: 481px) {
  #nav-dropdown {
    display: none;
  }
}
/* main */
main {
  display: flex;
  justify-content: space-between;
  /* margin-top: 4.62vh; */
  /* align-items: center; */
}
.text {
  /* border: 1px solid; */
  /* margin-top: 10.27vh; */
  max-width: 38vw;
  margin-left: 5.3vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: center;
}

.mockup {
  box-sizing: border-box;
  margin-right: 7.44vw;
}

.mockup img {
  max-width: 37.2vw;
}

main h1 {
  font-size: 8.2vh;
  /* border: 1px solid; */
  margin: 0px;
  margin-bottom: 3.43vh;
  color: white;
  display: flex;
  justify-content: space-between;
}

main p {
  color: white;
  font-size: 1.4rem;
  max-width: 36vw;
  margin: 0px;
  margin-bottom: 5.83vh;
  line-height: 1.5;
}

.findOutMore {
  display: flex;
  flex-direction: row;
  background-color: var(--mid-slate-blue);
  height: 7.87vh;
  max-width: 19.3vw;
  align-items: center;
}

.findOutMore a {
  color: white;
  text-decoration: none;
  text-align: center;
  font-size: 1.4rem;
  flex: 3;
}

.findOutMore span {
  background-color: var(--max-blue-purple);
  display: inline-block;
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* main tab media queries */
@media screen and (max-width: 820px) {
  main {
    margin-top: 20px;
    flex-direction: column;
    justify-content: center;
  }

  main h1 {
    max-width: 100%;
    text-align: center;
    margin-bottom: 2vh;
    margin-top: 2vh;
    font-size: 7.9vh;
  }

  main p {
    text-align: center;
    font-size: 2.5vh;
    max-width: 80%;
    margin: auto;
    margin-bottom: 5vh;
  }

  .text {
    max-width: 100%;
    margin: auto;
  }
  .text p {
    margin-bottom: 3vh;
  }

  .findOutMore {
    width: 80vw;
    max-width: 80vw;
    margin: auto;
    font-size: 2.5vh;
    margin-bottom: 3vh;
    display: flex;
  }

  .findOutMore a {
    font-size: 2.5vh;
  }

  .mockup {
    margin: auto;
    display: flex;
    justify-content: center;
  }

  .mockup img {
    max-width: 100%;
    padding-bottom: 3vh;
    margin-top: -3vh;
  }
}

/* main mobile media queries */
@media screen and (max-width: 480px) {
  main {
    margin-top: 3px;
    flex-direction: column;
  }

  main h1 {
    font-size: 5.7vh;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 2vh;
  }

  main p {
    text-align: center;
    max-width: 100vw;
    margin-bottom: 3vh;
    font-size: 2.5vh;
  }

  .text {
    max-width: 100vw;
    margin: 10px;
  }

  .mockup {
    margin: auto;
    display: flex;
    justify-content: center;
  }

  .mockup img {
    width: 90%;
    max-width: 90%;
    margin: auto;
    margin-top: -3vh;
  }

  .findOutMore {
    width: 80vw;
    margin: auto;
    font-size: 2.5vh;
    margin-bottom: 3vh;
    display: flex;
  }

  .findOutMore a {
    font-size: 2.5vh;
  }
}

.features {
  background-color: white;
  position: relative;
  /* height: 500px; */
  z-index: -1;
  padding: 26vh 5.31vw;
  padding-left: 5.31vw;
  padding-right: 5.31vw;
  overflow: hidden;
}

.features .feature-circle-1 {
  background-color: var(--persian-blue);
  width: 37.2vw;
  height: 37.2vw;
  border-radius: 50%;
  position: absolute;
  top: -59vh;
  left: 55vw;
  /* z-index: -1; */
}
.features .feature-circle-2 {
  background-color: var(--persian-blue);
  width: 37.2vw;
  height: 37.2vw;
  border-radius: 50%;
  position: absolute;
  bottom: -60vh;
  left: 55vw;
  /* z-index: -1; */
}

.features h1 {
  color: var(--persian-blue);
  font-size: 4.56vh;
  margin-bottom: 2vh;
  margin-top: 0px;
}

.red-text {
  color: var(--yellow-green) !important;
}

.green-text {
  color: var(--yellow-green) !important;
}

.features p {
  margin: 0px;
  margin-bottom: 2vh;
  font-size: 2.2vh;
  max-width: 500px;
  margin-bottom: 4vh;
}

.features section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20vh;
}
.features section.second {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0px;
  z-index: 2;
}
.features section > div {
  /* border: 1px solid; */
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-1 {
  max-width: 37.76vw;
}
.feature-1 {
  max-width: 28.54vw;
}
.features section a {
  background-color: var(--persian-blue);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  width: 14.48vw;
  height: 7.2vh;
  font-size: 2.8vh;
  text-decoration: none;
  text-align: center;
  vertical-align: center;
  /* position: absolute; */
  bottom: 0px;
  left: 0px;
}

.feature-3 img{
    width:80%;
    margin:auto;
}

.feature-3 img{
    
    margin-bottom:20px;
}

.cta {
  background-color: var(--cultured);
  padding: 6.77vw 18.51vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cta h1 {
  font-size: 4.63vh;
  max-width: 40.3vw;
  font-weight: 400;
}
.cta p {
  font-size: 3.24vh;
}

.cta a {
  font-size: 4.63vh;
  background-color: var(--yellow-green);
  color: white;
  text-decoration: none;
  padding: 2.31vh 9.22vw;
  border-radius: 2vh;
}

footer {
  background-color: var(--cultured-dark);
  display: flex;
  flex-direction: column;
}

footer .container,
.container2 {
  display: flex;
  justify-content: flex-start;
  gap: 7.55vw;
  padding: 7.13vh 22.5vw 18.7vh 6.77vw;
}

footer .container2 .icons {
    display: flex;
    justify-content: space-between;
  }

footer .line {
  border: 1px solid var(--light-gray);
}

.footer-gap {
  height: 4.72vh;
}

footer a {
  color: #000;
  text-decoration: none;
  font-weight: 300;
}

footer .email {
  color: var(--persian-blue);
}
/* tab queries for sections after footer */
@media screen and (max-width: 820px) {
  .features {
    padding: 10vh 5vh;
    position: relative;
  }

  .features .feature-circle-1 {
    top: -48vw;
    left: 12vh;
    width: 60vw;
    height: 60vw;
  }
  .features .feature-circle-2 {
    display: none;
  }
  .features section {
    flex-direction: column-reverse;
    margin-top: 100px;
  }
  .features section a {
    width: 70%;
    position: relative;
    margin: auto;
  }

  .features section > div {
    width: 100%;
  }
  .features section > div h1 {
    text-align: center;
  }

  .features p {
    max-width: 100%;
  }

  .feature-1 {
    max-width: 100%;
  }
  .cta {
    padding: 20px;
    display: block;
  }

  .cta > div {
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .cta a {
    padding: 20px;
    font-size: 3.5vh;
    margin: auto;
  }

  .cta h1,
  p {
    max-width: 90%;
    text-align: center;
    margin: auto;
    margin-bottom: 20px;
  }

  .cta h1 {
    max-width: 100%;
  }

  div#poweredby{
    background-color: white;
    padding: 20px;
  }

  footer .container {
    padding: 7.13vh;
    flex-wrap: wrap;
    /* flex-direction: column; */
    justify-content: center;
    align-items: baseline;
    padding: 20px 40px;
  }
  footer .container2 {
    padding: 7.13vh;
    /* flex-wrap: wrap; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* justify-content: center; */
    align-items: baseline;
    padding: 20px 40px;
  }
  footer .container2 .icons {
    display: flex;
    justify-content: space-around;
  }

  footer p {
    text-align: left;
  }
}

#logos > img{
  width: 13vw;
}
#logos {
  display: flex;
  justify-content: center;
  gap: 1vw;
  flex-wrap: wrap;
}
@media screen and (max-width: 480px) {
  html {
    width: 100vw;
  }
  #logos img{
    width: 25vw;
    margin: auto;
    margin-top: 10px;
  }
  #logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}