@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;800&display=swap");
* {
  font-family: "Karla";
  color: #444;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  color: #111;
  padding: 1em 0 0.5em 0;
}
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2em;
}
h3,
h4,
h5,
h6 {
  font-size: 1.2em;
}
p {
  padding: 0.5em 0 0.5em 0;
}
ul,
ol {
  padding: 0 0 0.5em 1.4em;
}

.header-logo {
  width: 120px;
}
header * {
  display: inline;
  text-decoration: none;
  color: #111;
}
nav ul {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 15px;
  padding: 0;
}
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 2% 5% 0 5%;
  gap: 1em 2em;
}
button {
  font-size: 1em;
  padding: 0.5em 1em;
  border-radius: 5vi;
  touch-action: manipulation;
  cursor: pointer;
}
.sales-button {
  background-color: #ff1744;
  color: white;
  border-style: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px,
    rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  will-change: transform, opacity;
}
nav button {
  display: none;
  background-color: #fff;
  border-style: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px,
    rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  will-change: transform, opacity;
}

nav button:hover {
  color: #008ba3;
}

nav button:active {
  box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%),
    0 8px 12px 6px rgb(60 64 67 / 15%);
  outline: none;
}

nav button:focus {
  outline: none;
  border: 1px solid #00bcd4;
}

nav button:not(:disabled) {
  box-shadow: rgba(0, 52, 58, 0.3) 0 1px 3px 0,
    rgba(0, 52, 58, 0.15) 0 4px 8px 3px;
}

nav button:not(:disabled):hover {
  box-shadow: rgba(0, 52, 58, 0.3) 0 2px 3px 0,
    rgba(0, 52, 58, 0.15) 0 6px 10px 4px;
}

nav button:not(:disabled):focus {
  box-shadow: rgba(0, 52, 58, 0.3) 0 1px 3px 0,
    rgba(0, 52, 58, 0.15) 0 4px 8px 3px;
}

nav button:not(:disabled):active {
  box-shadow: rgba(0, 52, 58, 0.3) 0 4px 4px 0,
    rgba(0, 52, 58, 0.15) 0 8px 12px 6px;
}

nav button:disabled {
  box-shadow: rgba(0, 52, 58, 0.3) 0 1px 3px 0,
    rgba(0, 52, 58, 0.15) 0 4px 8px 3px;
}

.solve-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 3%;
}

.card {
  width: 22%;
  min-width: 200px;
}
.card button {
  background-color: #fff;
  border: 1px solid #00bcd4;
}
footer {
  display: flex;
  gap: 1em 2em;
  align-items: flex-start;
  background-color: #00343a;
  padding: 3% 5% 3% 5%;
  flex-wrap: wrap;
}
footer * {
  display: inline;
  text-decoration: none;
  color: #fff;
}
footer menu ul {
  display: flex;
  flex-direction: column;
}
.footer-logo {
  width: 120px;
}
ul {
  margin: 0;
}
.podcast {
  padding: 5%;
  background-color: #eaf7f7;
}
main {
  padding: 0 5% 3% 5%;
}
.happy-dancer {
  margin: 20px;
}
.hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5% 10%;
}
#hero-text {
  width: 50%;
  font-size: 1.2em;
}
.legal {
  padding: 0 5% 5% 5%;
}
.sales-page-button-div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5% 10%;
  margin-top: 1em;
}
.georgie {
  /* display: none; */
}

.bullet-checks {
  list-style: none; /* Remove default list styling */
  padding: 0;
}

.bullet-checks li::before {
  content: "\2713"; /* Unicode check mark */
  color: rgb(0, 188, 212); /* Set the color to ours */
  margin-right: 5px; /* Add some spacing between the check mark and the list item text */
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns, each taking 50% width */
  gap: 30px; /* Space between columns */
  align-items: start; /* Align items at the top */
}

.grid-content {
  display: flex;
  flex-direction: column;
}
/*for now again*/
.grid-image img {
  width: 100%; /* Make the image responsive */
  height: auto; /* Maintain aspect ratio */
  max-width: 500px; /* Prevent the image from exceeding 500px */
  padding-top: 1em;
}
/* Media query for screens narrower than 700px*/
@media (max-width: 700px) {
  .grid-container {
    grid-template-columns: 1fr; /* Switch to a single column layout */
  }

  .grid-image {
    order: -1; /* Move the image to the top */
  }
}