/************************************************** home */

.parallax-home {
  background-blend-mode: multiply;
  background-image: linear-gradient(143deg,#0e95ef 0%,#00083d 100%), url(https://harvestreact.com/wp-content/uploads/2022/12/low-angle-view-skyscrapers.jpg);
  width: 100%;
  height: fit-content;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: 75px;
  background-size: cover;
  background-position-x: center;
}

.parallax-home .title-container {
  font-size: var(--40px);
  font-weight: 600;
  color: white;
}

.parallax-home .title-container > span {
  letter-spacing: 5;
  font-size: var(--20px);
}

.parallax-home .title-container > div {
  padding: var(--20px) 0;
  line-height: 1.6;
}

.parallax-home .title-container div > span {
  color: var(--font-color-contrast);
}

/************************************ .the-problem */

.the-problem {
  background-color: var(--bg-contrast);
  height: fit-content;
  padding: var(--100px) 0;
}

.the-problem h3 {
  color: var(--font-color-dark);
  margin: 0;
}

.the-problem p {
  margin-top: 0;
}

.the-problem .grid-container > div:last-child {
  width: 300px;
}

/************************************ .our-solution */

.our-solution {
  padding: var(--100px) 0;
}

.our-solution .grid-container div:first-child {
  max-width: 400px;
}

.our-solution .grid-container div h3 {
  color: var(--font-color-contrast);
  margin: 0;
}

.our-solution .grid-container div p {
  color: var(--white);
  margin-top: 0;
}

/************************************ .our-services */

.our-services {
  padding: var(--100px) 0;
  background-color: var(--bg-contrast);
}

.our-services h3 { margin-bottom: 50px; }

.our-services .grid-container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.our-services > div {
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 1200px;
}

.our-services > div h3 {
  color: var(--font-color-dark);
  font-weight: 600;
}

.service-card {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  padding: var(--20px);
  border-radius: var(--10px);
  height: 100%;
  position: relative;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1)
}

.service-card span i, .inquire-now i {
  font-size: var(--30px);
  padding: var(--20px);
  border-radius: 50%;
  margin-bottom: var(--20px);
}

.ad-partnerships i {
  color: #7a69e6;
  background-color: rgba(122,105,230,0.3);
}

.social-media-growth i {
 color: #FA5E5D;
 background-color: rgba(250,94,93,0.3);
}

.ecom-partnerships i {
 color: #f98d5e;
 background-color: rgba(249,141,94,0.3);
}

.seo i {
 color: #76ce44;
 background-color: rgba(118,206,68,0.3);
}

.service-card h4 {
  font-size: var(--20px);
  color: var(--font-color-dark);
  margin: var(--10px) 0;
}

.service-card p {
  text-align: justify;
  margin-top: 0;
}

.service-card a {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--white);
  background-image: none;
  color: var(--font-color-light);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1)
}

.our-services > div > a {
  margin-top: var(--150px);
}

/************************************************** ad partners */

.parallax-ad-partners {
  background-image: 
    linear-gradient(143deg,#0e95ef 0%,#00083d 100%),
    url(../Assets/three-way-road-fork.jpg);
}

/************************************ .program-overview */

.program-overview {
  background-color: var(--bg-contrast);
  padding: 100px 0;
}

.program-overview .title-container {
  text-align: justify;
  color: var(--font-color-base);
  max-width: 1200px;
  padding: 0 15px;
}

.program-overview h3 {
  width: 100%;
  color: var(--font-color-dark);
  margin: 0;
}

.program-overview p { width: 100%; }

.program-overview p > a { color: var(--font-color-contrast); }

/************************************ .testimonials */

.testimonials { padding: var(--100px) 0; }

.testimonials h3 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto var(--30px);
  color: var(--font-color-contrast);
  text-align: center;
}

.testimonials .grid-container > div:first-child { max-width: 532px; }

.testimonial-wrappers {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.testimonial-wrappers > div:first-child { 
  margin-bottom: var(--30px); 
}

.testimonial-card.grid-container {
  grid-template-columns: auto 1fr;
  width: 100%;
  align-items: start;
  background-color: var(--bg-contrast);
  border-radius: var(--15px);
  padding: var(--40px) var(--30px);
  text-align: justify;
}

.testimonial-card img {
  clip-path: circle();
  width: var(--100px);
}

.testimonial-card.grid-container p { margin: 0; }

.testimonial-card.grid-container span {
  display: block;
  margin-top: var(--30px);
  color: var(--font-color-dark);
  font-weight: 600;
}

/************************************************** ecom partners */

.parallax-ecom-partners {
  background-image: 
    linear-gradient(143deg,#0e95ef 0%,#00083d 100%),
    url(../Assets/business-partners.jpg);
}

/************************************ .qualifications */

.qualifications { 
  padding: 100px 0;
  background-color: var(--bg-contrast);
}

.qualifications .title-container {
  color: var(--font-color-base);
}

.qualifications .title-container:first-child {
  align-items: start;
  text-align: left;
  padding: 0 15px;
}

.qualifications .title-container:last-child { padding: 0 15px; }

.qualifications h3 {
  font-weight: 600;
  color: var(--font-color-dark);
  width: 100%;
  margin: 0 auto var(--30px);
  text-align: center;
}

.qualifications .title-container:first-child div {
  color: var(--font-color-dark);
  font-weight: 500;
}

.qualifications ul { padding-left: var(--16px); }

.qualifications div:last-child p > a { color: var(--font-color-contrast); }

.qualifications > div { text-align: center;}

/************************************ .faqs */

.faqs {
  padding: 100px 0;
  background-color: var(--white);
}

.faqs .grid-container > div:first-child { width: 100%; }

.faqs h3 {
  color: var(--font-color-dark);
  text-align: center;
  margin: 0 auto var(--30px);
}

.faqs-list {
  list-style-type: none;
  padding: 0;
}

.faqs-list > li {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid #d9d9d9;
  border-radius: var(--20px);
  padding: var(--10px) var(--30px);
  margin: var(--15px) 0;
  background-color: #f4f4f4;
  align-items: center;
/* Creates a smooth transition when the FAQ box is clicked to open it. */
  transition: height 0.5s ease-in-out;
  overflow: hidden;
  height: auto;
}

.faqs-list span {
  color: var(--font-color-contrast);
  font-size: var(--20px);
  font-weight: 500;
  line-height: 1.5;
}

.faqs-list i { 
  color: var(--font-color-contrast);
  padding-left: var(--10px);
}

.faqs-list > li ul {
  display: none;
  grid-column: 1 / 3;
  list-style-type: disc;
}

/********************** FAQ styling when clicked. */

.faqs-list > li.active { background-color: var(--white); }

.faqs-list > li.active > ul {
  display: block;
  transition: height 0.5s ease-in-out;
  overflow: hidden;
  height: auto;
}

/**********************/

.faqs > div:last-child {
  width: 100%;
  text-align: center;
  margin-top: var(--100px);
}

/************************************ .testimonials */
/* Refer to the CSS for the 'Ad Partners' page. */

/************************************************** growth */

.parallax-growth {
  background-image: 
    linear-gradient(143deg,#0e95ef 0%,#00083d 100%),
    url(../Assets/growth-parallax-image.png);
}

/************************************ .social-media-boosting */

.social-media-boosting {
  padding: 100px 0;
  background-color: var(--white);
}

.social-media-boosting h3 {
  color: var(--font-color-dark);
}

.social-media-boosting > div:last-child {
  width: 100%;
  text-align: center;
  margin-top: 100px;
}

/************************************ .pricing */

.pricing .title-container { max-width: 1200px;}

.pricing .title-container a { margin: var(--30px) 0; }

.pricing input {
  height: fit-content;
  width: 100%;
  padding: var(--20px) var(--15px);
  font-weight: 600;
  letter-spacing: 5;
  color: var(--white);
  background-color: black;
  border: none;
}

.pricing input:focus { outline: none; }