@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
  box-sizing: border-box;
  /* outline: 1px solid red !important; */
  /*
  dark grey background color = #202227
  light grey background color = #f7faff
  dark font color = #2d3748
  blue accent = #04F5F8
  */
}

body {
  margin: 0;
  color: #fff;
  background-color: #202227;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #04F5F8;
}

/* BASE STYLES */
#app {
  font-family: 'Inter', Arial, sans-serif;
  margin: 0 auto;
  padding: 0;
  background-color: none;
  width: 100vw;
}

.container {
  margin: 0 auto;
  max-width: 1400px;
}

.divider {
  height: 1px;
  width: 80px;
  border-top: 2px solid #3f4f66;
  margin: 3rem auto;
}

.ping {
  display: inline-block;
  height: 5px;
  width: 5px;
  background: #39ff14;
  border-radius: 50%;
  position: relative;
  margin-bottom: 1px;
}

/*@media (min-width: 900px) {
  .ping {
    margin-bottom: 0;
  }
}*/

.ping::after {
  content: "";
  height: 5px;
  width: 5px;
  background: #39ff14;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: pingAnimation 1s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes pingAnimation {
  0% {
    opacity: 0;
  }

  50% {
    opacity: .75;
    transform: scale(1.5);
  }

  100% {
    opacity: .1;
    transform: scale(5);
  }
}

/* ------------------ START OF NAVBAR ----------------------- */
.navbar {
  display: block;
  position: absolute;
  top: 0;
  z-index: 999;
  width: 100%;
  text-align: left;
  overflow: hidden;
  background-color: transparent;
}

.navbar a {
  float: center;
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 2rem 1.25rem;
  text-decoration: none;
  font-size: 1rem;
  /* border-radius: 10px; */
}

.navbar a:hover {
  /* background-color: #04F5F8;
  color: white; */
  opacity: 0.8;
}

.navbar a.active {
  background-color: #FF9900;
  color: white;
}

.navbar .icon {
  display: none;
  font-size: 2rem;
}

.navbar .navbar-btn {
  display: none;
  float: right;
  padding: 16px 24px;
  margin: 2.5rem 2.5rem;
  vertical-align: middle;
  width: 11rem;
  /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #04F5F8, #23d5ab);
  background-size: 200% 200%;
  animation: Gradient 5s ease infinite;
  color: #fff;*/
  background-color: #fff;
  color: #2d3748;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 1px 1px #777;
  border: none;
  border-radius: 4px;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer
}

.navbar-btn:hover {
  opacity: 0.8;
}

.logo img {
  float: center;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  width: 5rem;
  height: 5rem;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.logo:hover {
  background-color: transparent !important;
  opacity: 0.8;
}

.logo span {
  font-weight: semi-bold;
  font-size: 1.8rem;
  vertical-align: -10%;
}

/* HERO SECTION */
.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url("https://i.postimg.cc/TPRh4yRM/listskit-herobg.jpg");
  /* https://ik.imagekit.io/listskit/Lists%20Kit%20home/listskit-home-hero-background */
  /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: gradient 15s ease infinite; */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin: 0 auto 10rem auto;
  height: 100vh;
  width: 100vw;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.hero-image h1 {
  font-size: 4rem;
  width: 1000px;
  max-width: 1000px;
  margin: auto;
  text-align: center;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-wrap: balance;
}

.hero-image h1 a {
  text-decoration: none;
  color: inherit;
}

.hero-image h2 {
  font-size: 2rem;
  font-weight: 400;
  margin: 3rem auto 2rem auto;
  max-width: 1000px;
  text-align: center;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-wrap: balance;
}

.hero-btn {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 24px;
  margin: 1rem auto;
  width: 11rem;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #04F5F8, #23d5ab);
  background-size: 200% 200%;
  animation: Gradient 5s ease infinite;
  color: #fff;
  /*background-color: #fff;
  color: #2d3748;*/
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px #777;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
}

.hero-btn:hover {
  opacity: 0.8;
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* CARD STYLES FOR LISTING */
#cardContainer {
  display: flex;
  justify-content: center;
}

#cardWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 80rem;
}

.card {
  background-color: #1A1C21;
  color: #fff;
  border: 1px solid #2d3748;
  border-radius: 0.375rem;
  margin: 1rem;
  width: 18rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: shuffle 0.7s;
  text-align: left;
}

@keyframes shuffle {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

.card img {
  max-width: 100%;
  width: 100%;
  height: 15rem;
  cursor: default;
  object-fit: cover;
  object-position: center;
  border-radius: 0.375rem 0.375rem 0 0;
}

.card .content {
  margin: 1rem 1.5rem 5rem 1.5rem;
}

.card h2 {
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  font-weight: 600;
  /*color: #2d3748;*/
}

.card p {
  font-size: 1rem;
  margin: 0.5rem 0;
  /*color: #4a5568;*/
}

.card .btn {
  float: right;
  text-transform: uppercase;
}

.img-container {
  position: relative;
  text-shadow: 1px 1px #505050;
}

.img-container .overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  z-index: 999;
}

.img-container .icon-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: #fff;
  font-size: 1rem;
  z-index: 999;
}

.img-container .icon-right {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #fff;
  font-size: 1rem;
  z-index: 999;
}

.img-container .icon-bottom {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: #fff;
  font-size: 1rem;
  z-index: 999;
}

/* MODAL STYLES FOR CARDS */
.modal-container {
  display: none;
}

.modal-container .overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-container .modal {
  color: #666666;
  position: fixed;
  width: 800px;
  min-height: 450px;
  max-width: calc(100% - 80px);
  max-height: calc(100% - 80px);
  z-index: 9999;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
  background-color: #ffffff;
  border-radius: 0.375rem;
}

.modal-container .modal .modal-img {
  width: 100%;
  height: 16rem;
  margin: 0;
  border-radius: 5px 5px 0 0;
  cursor: default;
}

.modal-text {
  padding: 2rem;
}

.modal-container .close {
  position: fixed;
  top: -15%;
  right: -8%;
  background-color: transparent;
  border: 0px solid transparent;
  font-size: 40px;
  color: #FFFFFF;
}

.close:hover {
  cursor: pointer;
  color: #cccccc;
}

/* Load More button styles */
.spin {
  animation: spin 0.4s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: relative;
  margin: -25px 0 0 -25px;
  width: 20px;
  height: 20px;
}

.spinner .path {
  stroke: #4a5568;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* BUTTON STYLES */
#app .btn {
  padding: 8px 16px;
  margin: 1rem 0;
  background-color: #04F5F8;
  color: #202227;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

#app .btn:hover {
  opacity: 0.8;
}

#app .outline-btn {
  padding: 16px 16px;
  margin: 1rem 0;
  background-color: transparent;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: normal;
  border: 2px solid #04F5F8;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

#app .outline-btn:hover {
  background-color: #04F5F8;
  color: #202227;
  border: 2px solid #04F5F8;
}

#end-of-list {
  display: none;
  text-align: center;
  margin: 3rem auto;
}

/* FILTER TAG STYLES */
.filter-tags {
  /*margin: 2rem 1rem 1rem 1rem;*/
  margin: 2rem auto;
  text-align: center;
  width: 90%;
}

.filter-tag-btn {
  background-color: transparent;
  color: #fff;
  border: 2px solid #04F5F8;
  border-radius: 1.2rem;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem 0.5rem 0;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 1rem;
}

.filter-tag-btn:hover {
  opacity: 0.7;
}

.active-btn {
  background-color: #04F5F8;
  color: #202227;
}

/* SEARCH BAR STYLES */
.search-bar {
  max-width: 1400px;
  margin: 1rem;
  background-color: none;
  text-align: center;
}

.search-input {
  width: 91%;
  padding: 1rem;
  border: 2px solid #2d3748;
  border-radius: 0.375rem;
  background-color: #1A1C21;
  color: #fff;
}

.search-input:focus {
  outline: none !important;
  border-color: #04F5F8;
}

.search-input::placeholder {
  font-family: FontAwesome, Arial, sans-serif;
  content: "\f002";
  font-size: 1rem;
  padding-left: 0.2rem;
}

/* ------------- START OF FEATURE SECTION ------------- */
/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 2rem 3rem 2rem 3rem;
  text-align: center;
  color: #fff;
  background-color: #202227;
  margin: 0 auto 0 auto;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.row h2 {
  font-size: 2.5rem;
}

.row p {
  font-size: 1.5rem;
}

.feature-icon {
  display: inline-block;
  color: #04F5F8;
  text-align: center;
  font-size: 4rem;
  width: 15rem;
  height: 15rem;
}

.feature-icon img {
  width: 15rem;
  height: 15rem;
}

/* ------------- START OF IMAGE-TEXT SECTION ------------- */
.image-text {
  vertical-align: middle;
  background-color: #202227;
  position: relative;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 0 0 0;
  width: 100vw;
  color: #fff;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.image-text h2 {
  font-size: 2.5rem;
  margin: 3rem auto 3rem auto;
}

.image-text .column {
  float: left;
  padding: 4rem 3rem 2rem 3rem;
  text-align: center;
  color: #fff;
  background-color: transparent;
}

.image-text .row:after {
  content: "";
  display: table;
  clear: both;
}

.image-text .image-text-left-column {
  width: 40%;
  color: #fff;
  text-align: left;
  background-color: transparent;
  margin-left: 5%;
}

.image-text .image-text-right-column {
  width: 50%;
  text-align: left;
  background-color: transparent;
  color: #fff;
  font-size: 1.5rem;
}

.image-text .image-text-right-column h2 {
  font-size: 2.5rem;
  margin: 1rem auto;
}

.image-text .image-text-left-column img {
  position: relative;
  padding: 16px 24px;
  width: 20rem;
  background-color: transparent;
}

/* ------------- START OF TEXT-IMAGE SECTION ------------- */
.text-image {
  vertical-align: middle;
  background-color: #202227;
  position: relative;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 0 0 0;
  width: 100vw;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.text-image .column {
  float: left;
  padding: 4rem 3rem 2rem 3rem;
  text-align: center;
  color: #fff;
  background-color: transparent;
}

.text-image .row:after {
  content: "";
  display: table;
  clear: both;
}

.text-image .text-image-left-column {
  width: 50%;
  text-align: left;
  background-color: transparent;
  color: #fff;
  font-size: 1.5rem;
  margin-left: 5%;
}

.text-image .text-image-left-column h2 {
  font-size: 2.5rem;
  margin: 1rem auto;
}

.text-image .text-image-right-column {
  width: 40%;
  text-align: right;
  background-color: transparent;
}

.text-image .text-image-right-column img {
  position: relative;
  padding: 16px 24px;
  width: 20rem;
  background-color: transparent;
}

.text-image img:hover {
  opacity: 0.8;
}

/* ------------- START OF CAROUSEL STYLES ------------- */
.carousel {
  position: relative;
  padding: 3rem 2rem;
  margin: 2rem auto 5rem auto;
  width: 100vw;
  height: 45vh;
  /*height: auto;*/
  text-align: center;
  background-color: #f7faff;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner>.item {
  position: relative;
  display: none;
  animation: 0.5s ease-in-out;
}

.carousel-inner>.active,
.carousel-inner>.next {
  display: block;
}

.carousel-inner>.next {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner>.to-left {
  animation-name: left;
}

.carousel-inner>.from-right {
  animation-name: right;
}

.carousel-inner>.to-right {
  animation-name: right;
  animation-direction: reverse;
}

.carousel-inner>.from-left {
  animation-name: left;
  animation-direction: reverse;
}

.carousel-container {
  margin: 0 auto;
}

blockquote {
  padding: 1rem 2rem;
  margin: 5rem 10rem 2rem 10rem;
  font-size: 32px;
  text-wrap: balance;
}

.author {
  margin: 0;
  font-size: 1.5rem;
}

.stars {
  color: #FFF45B;
  margin: 1rem 0 2rem 0;
  font-size: 1.5rem;
}

.stars .fa-star,
.fa-star-o,
.fa-star-half-o {
  /* -webkit-text-stroke: 1.5px #ffac30; */
}

.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  cursor: pointer;
}

.carousel-control.right {
  right: 0;
  left: auto;
}

.carousel-control>.arrow {
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8+Cg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTkuNzEwNjkgMTguMjkyOUMxMC4xMDEyIDE4LjY4MzQgMTAuNzM0NCAxOC42ODM0IDExLjEyNDkgMTguMjkyOUwxNi4wMTIzIDEzLjQwMDZDMTYuNzkyNyAxMi42MTk1IDE2Ljc5MjQgMTEuMzUzNyAxNi4wMTE3IDEwLjU3MjlMMTEuMTIxMyA1LjY4MjU0QzEwLjczMDggNS4yOTIwMiAxMC4wOTc2IDUuMjkyMDIgOS43MDcwOCA1LjY4MjU0QzkuMzE2NTUgNi4wNzMwNyA5LjMxNjU1IDYuNzA2MjMgOS43MDcwOCA3LjA5Njc2TDEzLjg5MjcgMTEuMjgyNEMxNC4yODMzIDExLjY3MjkgMTQuMjgzMyAxMi4zMDYxIDEzLjg5MjcgMTIuNjk2Nkw5LjcxMDY5IDE2Ljg3ODdDOS4zMjAxNiAxNy4yNjkyIDkuMzIwMTYgMTcuOTAyMyA5LjcxMDY5IDE4LjI5MjlaIiBmaWxsPSIjMEYwRjBGIi8+IDwvZz4KDTwvc3ZnPg==") center center no-repeat;
  background-size: 50px 40px;
  opacity: 0.6;
  transform: translateY(-50%);
}

.carousel-control>.arrow:hover {
  opacity: 0.8;
}

.carousel-control>.arrow.left {
  transform: translateY(-50%) rotate(180deg);
}

.carousel-control>.arrow.right {
  right: 50%;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  padding-left: 0;
  margin: 0;
  list-style: none;
  transform: translateX(-50%);
}

.carousel-indicators li {
  display: inline-block;
  width: 15px;
  height: 15px;
  cursor: pointer;
  border: 2px solid #333;
  border-radius: 10px;
  margin: 0 0.5rem;
}

.carousel-indicators li.active {
  background-color: #333;
}

@keyframes left {
  from {
    left: 0;
  }

  to {
    left: -100%;
  }
}

@keyframes right {
  from {
    left: 100%;
  }

  to {
    left: 0;
  }
}

/* ------------- START OF TESTIMONIAL SECTION ------------- */
.testimonial {
  margin-top: 8rem;
}

.testimonial h2 {
  font-size: 2.5rem;
  text-align: center;
  margin: 0 auto 4rem auto;
  padding: 0 2rem;
}

.testimonial a {
  text-decoration: none;
  cursor: pointer;
  color: #04F5F8;
}

.main-quote {
  text-align: center;
  position: relative;
  text-wrap: balance;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0 auto 4rem auto;
}

.main-quote .open-quote {
  font-size: 4rem;
  opacity: 0.05;
  z-index: -1;
  position: absolute;
  top: -2rem;
  left: 5%;
}

.main-quote .close-quote {
  font-size: 4rem;
  opacity: 0.05;
  z-index: -1;
  position: absolute;
  bottom: 6rem;
  right: 5%;
}

.testimonial-container {
  display: flex;
  justify-content: center;
}

.testimonial-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 80rem;
}

.quote-container {
  text-align: left;
  padding: 1rem 2rem;
  background-color: #1A1C21;
  border: 2px solid #2d3748;
  width: 23rem;
  text-wrap: balance;
  border-radius: 0.375rem;
  margin: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quote-container blockquote {
  position: relative;
  text-align: left;
  text-wrap: balance;
  padding: 1rem 0 0 0;
  margin: 0;
  font-size: 1.1rem;
  min-height: 11rem;
}

.quote-container .author {
  margin: 0 auto 1.5rem auto;
  font-size: 1rem;
}

.quote-container .stars {
  color: #FFF45B;
  margin: 1rem 0 2rem 0;
  font-size: 1rem;
}

.quote-container .stars .fa-star,
.fa-star-o,
.fa-star-half-o {
  /* -webkit-text-stroke: 1.5px #ffac30; */
}

/* ------------- START OF PRICING SECTION ------------- */
.pricing-background {
  padding: 0 25px 25px 25px;
  position: relative;
  width: 85%;
  margin: 8rem auto;
}

.pricing-background::after {
  /*content: '';*/
  background: #1A1C21;
  /*background: -moz-linear-gradient(top, #60a9ff 0%, #4394f4 100%);
  background: -webkit-linear-gradient(top, #60a9ff 0%, #4394f4 100%);
  background: linear-gradient(to bottom, #60a9ff 0%, #4394f4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60a9ff', endColorstr='#4394f4', GradientType=0);*/
  height: 110%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  box-sizing: inherit;
}

.pricing-background ol,
.pricing-background ul {
  list-style: none;
  box-sizing: inherit;
  padding-inline-start: 0;
}

.pricing-header h2 {
  font-size: 2.5rem;
  margin: 1rem auto 3rem auto;
  overflow-wrap: break-word;
  text-align: center;
}

.pricing-header p {
  font-size: 1.5rem;
  text-align: left;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .pricing-background {
    padding: 0 0 25px;
  }
}

.pricing-container {
  margin: 0 auto;
  padding: 50px 0 0;
  max-width: 1000px;
  width: 100%;
}

.panel {
  background-color: #1A1C21;
  border-radius: 10px;
  padding: 15px 25px;
  position: relative;
  width: 100%;
  z-index: 10;
}

.pricing-table {
  /* box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.08), 0px 20px 31px 3px rgba(0, 0, 0, 0.09), 0px 8px 20px 7px rgba(0, 0, 0, 0.02); */
  border: 2px solid #2d3748;
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .pricing-table {
    flex-direction: row;
  }
}

.pricing-table * {
  text-align: left;
  text-transform: normal;
  box-sizing: inherit;
}

.pricing-table a {
  text-decoration: none;
  cursor: pointer;
  color: #04F5F8;
}

.pricing-plan {
  border-bottom: 2px solid #2d3748;
  padding: 25px;
}

.pricing-plan:last-child {
  border-bottom: none;
}

@media (min-width: 900px) {
  .pricing-plan {
    border-bottom: none;
    border-right: 2px solid #2d3748;
    flex-basis: 100%;
    padding: 25px 50px;
  }

  .pricing-plan:last-child {
    border-right: none;
  }
}

.pricing-img {
  margin-bottom: 25px;
  max-width: 100%;
  /*filter: grayscale(100%) sepia(100%) hue-rotate(90deg);*/
}

.pricing-header {
  /*color: #888;*/
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pricing-features {
  /*color: #016FF9;*/
  letter-spacing: 1px;
  margin: 50px 0 25px;
}

.pricing-features-item {
  border-top: 2px solid #2d3748;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 15px 0;
  position: relative;
}

.pricing-features-item:last-child {
  border-bottom: 2px solid #2d3748;
}

.pricing-features-item i {
  color: #04F5F8;
  font-size: 1rem;
}

.pricing-features-item .supercript-tag {
  background-color: #FF4FAE;
  color: #000;
  padding: 0.15rem 0.4rem;
  border-radius: 2rem;
  font-size: 0.5rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  /*text-overflow: ellipsis;*/
  vertical-align: super;
}

.feature-greyed,
.feature-greyed i {
  color: #777 !important;
}

.pricing-price {
  color: #04F5F8;
  display: block;
  font-size: 4rem;
  font-weight: 700;
}

#premium-badge {
  position: absolute;
  margin-top: -3px;
  /* background-color: #f0d000; */
  /*animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  animation-delay: 0.1s;
  animation-iteration-count: 2;
  transform: translate3d(0, 0, 0);*/
}

.premium-shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  animation-delay: 0.1s;
  animation-iteration-count: 2;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
}

.pricing-price .usd {
  color: #777;
  font-size: 1rem;
}

.pricing-button {
  border: 1px solid #04F5F8;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  margin: 3rem 0;
  padding: 16px 8px !important;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-in-out;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.5rem !important;
  font-weight: 500;
  width: 12rem;
}

.pricing-button:hover,
.pricing-button:focus {
  opacity: 0.8;
  background-color: #04F5F8;
  color: #202227;
}

.pricing-button.is-featured {
  background-color: #04F5F8;
  color: #202227;
  font-size: 1.5rem !important;
  font-weight: 500;
  width: 12rem;
}

.pricing-button.is-featured:hover,
.pricing-button.is-featured:active {
  opacity: 0.8;
}

/* ------------- START OF FAQS SECTION ------------- */
.faq-container {
  padding: 1rem 2%;
  margin: 3rem auto;
  width: 60%;
}

.faq-container h2 {
  font-size: 2.5rem;
  text-align: center;
  margin: 3rem auto 3rem auto;
}

.faq-container a {
  text-decoration: none;
  cursor: pointer;
  color: #04F5F8;
}

.accordion {
  margin-bottom: 1rem;
}

.toggle {
  align-items: center;
  background-color: #04F5F8;
  opacity: 0.9;
  border-radius: 4px;
  color: #202227;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  padding: 1rem 1.2rem;
  margin-bottom: 2px;
}

.toggle i {
  font-size: 1.2rem;
  margin-right: .6rem;
}

.faq-content {
  background: #1A1C21;
  border-radius: 4px;
  border: 2px solid #2d3748;
  padding: 1rem 1.2rem 1rem 1.2rem;
  display: none;
}

.faq-content>* {
  line-height: 1.25;
  margin: 0;
  opacity: 1;
  visibility: visible;
}

.faq-content ul li {
  margin-bottom: 1rem;
}

.slide-enter-active,
.slide-leave-active {
  transition:
    padding-top .3s ease-out,
    padding-bottom .3s ease-out;
}

.slide-enter-active>* {
  transition:
    line-height .3s ease-out,
    opacity .1s linear .1s,
    visibility .1s linear .1s;
}

.slide-leave-active>* {
  transition:
    line-height .3s ease-out,
    opacity .1s linear,
    visibility .1s linear;
}

.slide-enter,
.slide-leave-to {
  padding-top: 0;
  padding-bottom: 0;
}

.slide-enter>*,
.slide-leave-to>* {
  line-height: 0;
  opacity: 0;
  visibility: hidden;
}

/* ------------- START OF CENTERED CTA SECTION ------------- */
.centered-cta {
  position: relative;
  padding: 2rem;
  margin: 2rem auto 5rem auto;
  width: 100vw;
  background-color: #202227;
  font-size: 1.5rem;
  text-align: center;
  text-wrap: balance;
}

.centered-cta h2 {
  font-size: 2.5rem;
  margin: 1rem auto 3rem auto;
}

.centered-cta p {
  width: 80%;
  margin: 2rem auto 3rem auto;
  text-wrap: balance;
}

.centered-cta video {
  width: 85%;
  border-radius: 0.375rem;
  margin: 2rem auto 3rem auto;
}

.centered-cta-btn {
  position: relative;
  margin: 4rem auto 4rem auto;
}

.centered-cta-btn a {
  padding: 16px 24px;
  width: 11rem;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #04F5F8, #23d5ab);
  background-size: 200% 200%;
  animation: Gradient 5s ease infinite;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 1px 1px #777;
  border: none;
  border-radius: 4px;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
}

.centered-cta-btn:hover {
  opacity: 0.8;
}

#about img {
  width: 10rem;
  border-radius: 50%;
  float: left;
  margin: 1rem 2rem 1rem 0;
}

/* ------------- START OF CTA SECTION ------------- */
.cta {
  vertical-align: middle;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #04F5F8, #23d5ab);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 0 0 0;
  width: 100vw;
}

.cta .column {
  float: left;
  padding: 4rem 3rem 2rem 3rem;
  text-align: center;
  color: #2d3748;
  background-color: #f7faff;
}

.cta .row:after {
  content: "";
  display: table;
  clear: both;
}

.cta .cta-left-column {
  width: 60%;
  color: #fff;
  text-align: left;
  background-color: transparent;
  margin-left: 5%;
  text-wrap: balance;
}

.cta .cta-right-column {
  width: 40%;
  text-align: right;
  background-color: transparent;
}

.cta .cta-btn {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translate(-30%, -50%);
  padding: 16px 24px;
  width: 14rem;
  background-color: #fff;
  color: #2d3748;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
}

.cta .cta-btn:hover {
  opacity: 0.8;
}

/* ------------- START OF CONTACT FORM SECTION ------------- */
.form {
  text-align: center;
  margin: 5rem auto;
  font-size: 1.5rem;
}

.form h2 {
  font-size: 2.5rem;
  margin: 1rem auto 3rem auto;
}

.form p {
  width: 80%;
  margin: 2rem auto 3rem auto;
  text-wrap: balance;
}

.form-container {
  margin: 5rem auto;
  background-color: none;
  text-align: center;
  display: flex;
  justify-content: center;
}

.form-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 80rem;
}

.form-container label {
  text-align: left;
}

.form-container .btn {
  padding: 16px 8px !important;
  margin: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 500;
  width: 8rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 1000px;
  width: 40rem;
}

.form-input {
  padding: 1rem;
  border: 2px solid #2d3748;
  border-radius: 0.375rem;
  margin: 0 0 1.25rem 0;
  background-color: #1A1C21;
  color: #fff;
}

.form-input:focus {
  outline: none !important;
  border-color: #04F5F8;
}

/* ------------- START OF FOOTER SECTION ------------- */
.footer .column {
  float: left;
  padding: 4rem 3rem 2rem 3rem;
  text-align: left;
  color: #fff;
  background-color: #202227;
}

.footer {
  background-image: linear-gradient(#202227, #202227);
  background-color: #202227;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin: 0 auto;
  text-align: center;
  /*padding: 0 5rem;*/
  /*height: 90vh;*/
  width: 100vw;
}

.left-column {
  width: 40%;
  text-wrap: balance;
}

.left-column img {
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem 0.3rem -0.2rem;
  vertical-align: middle;
}

.middle-column,
.right-column {
  width: 30%;
}

/* Clear floats after the columns */
.footer .row:after {
  content: "";
  display: table;
  clear: both;
}

.footer .row h2 {
  font-size: 1.5rem;
}

.footer .row p {
  font-size: 1rem;
}

.footer .row a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

.footer .social-icons span {
  font-size: 1.25rem;
  margin: 1.5rem 1rem 1rem 0;
  float: left;
}

.footer .updates a {
  text-decoration: none;
  cursor: pointer;
  color: #04F5F8;
}

.sticky-badge {
  position: fixed;
  right: 0px;
  bottom: 0px;
  padding: 16px 24px !important;
  margin: 1rem !important;
  color: #fff;
  border-radius: 0.3rem;
  font-size: 1.25rem !important;
  cursor: pointer;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  width: 16.5rem;
  background: linear-gradient(-45deg, #833ab4, #fd1d1d, #fcb045);
  background-size: 200% 200%;
  animation: Gradient 5s ease infinite;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
}

.sticky-badge:hover {
  opacity: 0.8;
}

.reverse {
  unicode-bidi: bidi-override;
  direction: rtl;
}

#dummy {
  display: none;
}

/* ----------------------- START OF MEDIA QUERIES ----------------------- */
@media (max-width: 360px) {
  .hero-image h1 {
    font-size: 2rem !important;
    width: 300px !important;
    max-width: 300px !important;
    margin: auto;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-image h2 {
    font-size: 1rem !important;
    font-weight: 400;
    margin: 3rem auto 2rem auto;
    width: 300px !important;
    max-width: 300px !important;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .pricing-button {
    width: 9rem !important;
  }

  .pricing-background {
    padding: 0 0 25px 0;
    width: 90%;
  }

  .pricing-price {
    font-size: 4.5rem !important;
    font-weight: 700;
  }


}

/* Media Query for Mobile Devices */
@media (max-width: 480px) {
  #cardWrapper {
    justify-content: center;
  }

  .card {
    width: 90%;
  }

  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  .column {
    width: 100%;
  }

  blockquote {
    padding: 0.5rem 1rem;
    margin: 0.5rem 2rem;
    font-size: 1.2rem;
  }

  /*.navbar a:first-child,
          a:not(:first-child) {
            display: none;
      }*/

  .navbar a:first-child {
    display: block;
    float: left;
  }

  .navbar a:not(:first-child) {
    display: none;
    padding-left: 2.5rem;
  }

  .navbar a.icon {
    float: right;
    display: block;
    margin: 0.6rem 1rem;
    font-size: 1.5rem;
    padding-left: 1.25rem;
  }

  .navbar.responsive {
    position: relative;
    padding-bottom: 2rem;
  }

  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .logo img {
    font-size: 1rem;
    width: 3rem;
    height: 3rem;
    margin-left: 0.5rem;
  }

  .hero-image h1 {
    font-size: 2.25rem;
    width: 350px;
    max-width: 400px;
    margin: auto;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-image h2 {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 3rem auto 2rem auto;
    width: 350px;
    max-width: 400px;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-btn {
    top: 77%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px 24px;
    margin: 1rem auto;
    width: 11rem;
    background-size: 200% 200%;
    border-radius: 4px;
    font-size: 1.5rem;
  }

  .carousel {
    padding: 2rem 1.3rem;
    margin: 2rem auto 5rem auto;
    height: 45vh;
  }

  .author {
    font-size: 0.8rem;
  }

  .stars {
    font-size: 0.8rem;
  }

  .image-text {
    position: relative;
    float: center;
    text-align: center;
    margin: 5rem auto;
  }

  .image-text .column {
    padding: 0 3rem 1rem 3rem;
  }

  .image-text .image-text-left-column {
    width: 100%;
    display: inline-block;
    text-align: center;
    background-color: transparent;
    margin: 0 auto;
  }

  .image-text .image-text-left-column img {
    margin-left: -1rem;
    width: 90%;
  }

  .image-text .image-text-right-column {
    width: 100%;
    display: inline-block;
    text-align: center;
    background-color: transparent;
  }

  .text-image {
    position: relative;
    float: center;
    text-align: center;
    margin: 5rem auto;
  }

  .text-image .column {
    float: center;
    text-align: center;
    padding: 0 3rem 1rem 3rem;
  }

  .text-image .text-image-left-column {
    width: 90%;
    display: inline-block;
    text-align: center;
    background-color: transparent;
  }

  .text-image .text-image-right-column {
    width: 90%;
    display: inline-block;
    text-align: center;
    background-color: transparent;
    margin: 0 auto;
  }

  .text-image .text-image-right-column img {
    padding: 0;
    width: 90%;
  }

  .main-quote .open-quote {
    left: 7%;
  }

  .main-quote .close-quote {
    right: 5%;
  }

  .testimonial-wrapper {
    justify-content: center;
  }

  .quote-container {
    padding: 1rem 2rem;
    width: 90%;
    margin: 1rem;
  }

  .quote-container blockquote {
    font-size: 1.2rem;
    min-height: 11rem;
  }

  .quote-container .author {
    margin: 0 auto 1rem auto;
    font-size: 0.8rem;
  }

  .quote-container .stars {
    margin: 1rem 0 2rem 0;
    font-size: 0.8rem;
  }

  .pricing-background {
    padding: 0 0 25px 0;
    width: 90%;
  }

  .pricing-price {
    font-size: 5rem;
    font-weight: 700;
  }

  .cta {
    padding: 0;
  }

  .cta .column {
    padding: 2rem 1rem 2rem 1rem;
  }

  .cta .cta-btn {
    position: relative;
    display: inline-block;
    text-align: left;
    transform: translate(25%, -50%);
  }

  .cta .cta-left-column {
    width: 90%;
    margin-left: 5%;
    text-wrap: balance;
  }

  .cta .cta-right-column {
    width: 90%;
    text-align: left;
    text-wrap: balance;
  }

  #about img {
    width: 5rem;
    margin: 0.5rem 1rem 0.5rem 0;
  }

  .faq-container {
    padding: 1rem 2%;
    margin: 3rem auto;
    width: 90%;
  }

  .contact-form {
    max-width: 1000px;
    width: 19rem;
  }

}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
  #cardWrapper {
    justify-content: center;
  }

  .card {
    width: 90%;
  }

  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  .column {
    width: 100%;
  }

  blockquote {
    padding: 0.5rem 1rem;
    margin: 2rem 3rem;
    font-size: 1.4rem;
  }

  .navbar a {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }

  /*.navbar a:first-child,
          a:not(:first-child) {
            display: none;
      }*/

  .navbar a:first-child {
    display: block;
    float: left;
  }

  .navbar a:not(:first-child) {
    display: none;
    padding-left: 2.5rem;
  }

  .navbar a.icon {
    float: right;
    display: block;
    margin: 1.5rem 1rem;
    font-size: 2rem;
    padding-left: 1.25rem;
  }

  .navbar.responsive {
    position: relative;
    padding-bottom: 2rem;
  }

  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .hero-image h1 {
    font-size: 3.5rem;
    width: 500px;
    max-width: 500px;
    margin: auto;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-image h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 3rem auto 2rem auto;
    width: 500px;
    max-width: 500px;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-btn {
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px 24px;
    margin: 1rem auto;
    width: 11rem;
    background-size: 200% 200%;
    border-radius: 4px;
    font-size: 1.5rem;
  }

  .carousel {
    padding: 3rem 1.3rem;
    margin: 2rem auto 5rem auto;
    height: 45vh;
  }

  .author {
    font-size: 1rem;
  }

  .stars {
    font-size: 1rem;
  }

  .image-text {
    position: relative;
    float: center;
    text-align: center;
    margin: 5rem auto;
  }

  .image-text .column {
    padding: 0 3rem 1rem 3rem;
  }

  .image-text .image-text-left-column {
    width: 100%;
    display: inline-block;
    text-align: center;
    background-color: transparent;
    margin: 0 auto;
  }

  .image-text .image-text-left-column img {
    padding: 0;
  }

  .image-text .image-text-right-column {
    width: 100%;
    display: inline-block;
    text-align: center;
    background-color: transparent;
  }

  .text-image {
    position: relative;
    float: center;
    text-align: center;
    margin: 5rem auto;
  }

  .text-image .column {
    float: center;
    text-align: center;
    padding: 0 3rem 1rem 3rem;
  }

  .text-image .text-image-left-column {
    width: 90%;
    display: inline-block;
    text-align: center;
    background-color: transparent;
  }

  .text-image .text-image-right-column {
    width: 90%;
    display: inline-block;
    text-align: center;
    background-color: transparent;
    margin: 0 auto;
  }

  .text-image .text-image-right-column img {
    padding: 0;
  }

  .main-quote .open-quote {
    left: 7%;
  }

  .main-quote .close-quote {
    right: 5%;
  }

  .testimonial-wrapper {
    justify-content: center;
  }

  .quote-container {
    padding: 1rem 2rem;
    width: 90%;
    margin: 1rem;
  }

  .quote-container blockquote {
    font-size: 1.4rem;
    min-height: 11rem;
  }

  .quote-container .author {
    margin: 0 auto 1rem auto;
    font-size: 1rem;
  }

  .quote-container .stars {
    margin: 1rem 0 2rem 0;
    font-size: 1rem;
  }

  .pricing-background {
    padding: 0 0 25px 0;
    position: relative;
    width: 90%;
    margin: 8rem auto;
  }

  .cta {
    padding: 0;
  }

  .cta .cta-btn {
    position: relative;
    display: inline-block;
    text-align: left;
    transform: translate(40%, -50%);
  }

  .cta .cta-left-column {
    width: 90%;
    margin-left: 5%;
    text-wrap: balance;
  }

  .cta .cta-right-column {
    width: 90%;
    text-align: left;
    text-wrap: balance;
  }

  .faq-container {
    padding: 1rem 2%;
    margin: 3rem auto;
    width: 90%;
  }

  .contact-form {
    max-width: 1000px;
    width: 30rem;
  }

}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
  #cardWrapper {
    max-width: 40rem;
  }

  .card {
    margin: 1rem;
    width: 18rem;
    text-align: left;
  }

  blockquote {
    padding: 0.5rem 1rem;
    margin: 2rem 4rem 2rem 4rem;
    font-size: 32px;
  }

  .hero-image h1 {
    font-size: 3.25rem;
    width: 750px;
    max-width: 760px;
    margin: auto;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-image h2 {
    font-size: 1.75rem;
    font-weight: 400;
    margin: 3rem auto 2rem auto;
    width: 700px;
    max-width: 700px;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-btn {
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px 24px;
    margin: 1rem auto;
    width: 11rem;
    background-size: 200% 200%;
    border-radius: 4px;
    font-size: 1.5rem;
  }

  .main-quote .open-quote {
    left: 7%;
  }

  .main-quote .close-quote {
    right: 5%;
  }

  .testimonial-wrapper {
    max-width: 60rem;
  }

  .quote-container {
    width: 14rem;
  }

  .quote-container blockquote {
    font-size: 1rem;
    min-height: 11rem;
  }

  .quote-container .author {
    margin: 0 auto 1rem auto;
    font-size: 0.8rem;
  }

  .quote-container .stars {
    font-size: 0.8rem;
  }

  .cta .cta-btn {
    top: 50%;
    right: 10%;
    transform: translate(0%, -50%);
  }

  .faq-container {
    padding: 1rem 2%;
    margin: 3rem auto;
    width: 80%;
  }

}

/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
  #cardWrapper {
    max-width: 60rem;
  }

  .card {
    margin: 1rem;
    width: 18rem;
    text-align: left;
  }

  blockquote {
    padding: 0.5rem 1rem;
    margin: 4rem 4rem 2rem 4rem;
    font-size: 32px;
  }

  .main-quote .open-quote {
    left: 7%;
  }

  .main-quote .close-quote {
    right: 5%;
  }

  .testimonial-wrapper {
    max-width: 60rem;
  }

  .quote-container {
    width: 18rem;
  }

  .faq-container {
    padding: 1rem 2%;
    margin: 3rem auto;
    width: 70%;
  }

}

/* Media Query for Large screens */
@media (min-width: 1281px) {
  .left-column {
    width: 40%;
    margin-left: 10% !important;
  }

  .left-column img {
    margin: 0 0.5rem 0.3rem -0.2rem;
  }

  .middle-column,
  .right-column {
    width: 20%;
  }

  .image-text {
    margin: 0 auto;
    padding: 2rem 5rem 0 5rem;
    width: 100vw;
  }

  .image-text .image-text-left-column {
    width: 30%;
    text-align: left;
    background-color: transparent;
    margin-left: 15%;
  }

  .image-text .image-text-right-column {
    width: 40%;
    text-align: left;
    background-color: transparent;
    margin-right: 15%;
  }

  .text-image {
    margin: 0 auto;
    padding: 2rem 5rem 0 5rem;
    width: 100vw;
  }

  .text-image .text-image-left-column {
    width: 40%;
    text-align: left;
    background-color: transparent;
    margin-left: 15%;
  }

  .text-image .text-image-right-column {
    width: 30%;
    text-align: right;
    background-color: transparent;
    margin-right: 15%;
  }

  .main-quote .open-quote {
    left: 18%;
  }

  .main-quote .close-quote {
    right: 16.5%;
  }

  .maybe-text {
    width: 60vw !important;
  }

  .cta .cta-left-column {
    width: 60%;
    color: #fff;
    text-align: left;
    background-color: transparent;
    margin-left: 10%;
  }

  .cta .cta-right-column {
    width: 40%;
    text-align: right;
    background-color: transparent;
    margin-right: 10%;
  }

}