/*

Author: Jennifer Carmin Campos, jcc-digital

********** FONT FAMILY **********
font-family: 'Montserrat', sans-serif;
font-family: 'Ubuntu', sans-serif;

*/
/********************************** SELECTORS **********************************/
body {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  line-height: 1.7rem;
}

/********************************** CLASS & ID SELECTORS PER PAGE STRUCTUREs **********************************/
/* Container Section */
.container-fluid-nav {
  padding: 1% 15% 1%;
}

.container-fluid {
  padding: 7% 15%;
}

#cta .container-fluid {
  padding: 15% 15% 10%;
}

footer .container-fluid {
  padding: 10% 15% 5%;
}

/* Sections */
.colour-bg {
  background-color: #ff4e68;
  color: #fff;
}

.light-bg {
  background-color: #fff;
}

/* Title Section */
#title {
  text-align: left;
}

/* See class 89 Advanced CSS - Combining Selectors.
Other solution for "container-fluid-nav" Note: Since the container-fluid class is adding too much padding to the navbar, the solution to ONLY CHANGE the container-fluid class when in the #title section is to do the following:
#title .container-fluid {
  padding: 1% 15% 1%;
}
*/

/* Naviagtion Bar */
.navbar {
  background-color: #ff4c68;
  opacity: 0.90;
  padding: 2% 15%;
}

.navbar-brand {
  font-family: 'Ubuntu';
  font-size: 2.5rem;
  font-weight: bold;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
}

/* HEADINGS */
/* Title Section, Heading Left Aligned */
.title-col-lg-6 {
  padding: 0;
}

.big-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 4.1rem;
  ;
}

.section-heading {
  font-size: 3.0rem;
  font-weight: 400;
  line-height: 3.3rem;
}

/* Downlod Buttons */
.download-btn {
  margin: 5% 3% 10% 0;
}

/* Title Img */
.zindex-b5 {
  position: relative;
  /* Note: In bootstrap 5, the col classes don't have position: relative;. So you have to add it manually to the col div by adding a custom class, otherwise when you assign 60%, it will size it relative to the whole body of the website.*/
}

.title-img {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
  right: 24%;
}

@media (max-width: 1028px) {
  #title {
    text-align: center;
  }

  .title-img {
    position: static;
    transform: rotate(0);
  }
}

/* Features Section */
#features {
  position: relative;
}

.feature-title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6rem;
}

/* Features - Icons */
.ft-icons {
  color: #ff4c68;
  font-size: 4rem;
  padding: 5% 0 7% 0;
}

.ft-icons:hover {
  color: #ce2f48;
}

.feature-box {
  padding: 5%;
}

.feature-box p {
  color: #8f8f8f;
  font-family: 'Montserrat', sans-serif;
}

/* Testimonials Section */
#testimonials {
  background-color: #ff4c68c7;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
}

.testimonial-img {
  border-radius: 100%;
  margin: 0 auto;
  padding: 5% 0;
  width: 28%;
}

.carousel-item {
  padding: 10% 15%;
}

.testimonial-text {
  font-size: 3.0rem;
  font-weight: 400;
  line-height: 3.3rem;
}

/* Press Section */
#press {
  background-color: #eee;
  padding: 7% 14% 7% 14%;
}

.press-img {
  width: 20%;
  -webkit-filter: grayscale(30%);
  filter: grayscale(100%);
  margin: 20px auto 50px;
}

/* Pricing, Card Section */
#pricing {
  font-family: 'Montserrat', sans-serif;
  padding: 100px;
}

.pricing-col {
  padding: 3% 2%;
}

.price-subtitle {
  font-size: 3.0rem;
  font-weight: 400;
  line-height: 3.3rem;
}

.pricing-pckg-title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6rem;
}

/* CTA Section */
#cta {
  font-family: 'Montserrat', sans-serif;
}

/* Footer Section */
.footer-heading {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6rem;
}

.footer-icons {
  color: #333;
  font-size: 1.6rem;
  margin: 1% 2%;
  padding: 0 0 5%;
}

.footer-icons:hover {
  color: #ff4c68;
}

.footer-legal {
  background-color: #eee;
  padding: 3% 15% 1%;
}

/* Spaces */
.space-150 {
  height: 150px;
  width: 100%
}