/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
/* Since positioning the image, we need to help out the caption */
.carousel-caption {bottom: 1rem; z-index: 10;}
/* Declare heights because of positioning of img element */
.carousel-item {height: 32rem; background-color: var(--bs-yellow);}
.carousel-item > img {text-align: center;}
.carousel-caption h2 {color:var(--bs-primary); display: block; margin: 0 auto;}
.carousel-caption p {color:var(--bs-primary);}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing {margin-top: 2rem;}
.marketing .col-lg-4 {margin-bottom: 1.5rem; text-align: center;}
.marketing h2 {font-weight: 400;}
.marketing .col-lg-4 p {margin-right: .75rem; margin-left: .75rem;}

.marketing .marketing-areas {padding-top: 15px}
.marketing .title {border-bottom: 1px solid #a1aab7;}
.marketing .title {text-align: center; padding:10px; margin-bottom: 30px;}
.marketing .title h1 {font-weight: normal; margin-bottom: 20px; padding: 0;}

.marketing .marketing-areas {padding-top: 15px;}




.reviews-section {
  padding-bottom: 50px;
}
.reviews-section .container {
  padding-top:50px;
}
.reviews-section .container .title {
  text-align: center;
  padding:10px;
  margin-bottom: 20px;
}
.reviews-section .container .title {border-bottom: 1px solid var(--bs-primary);}
.reviews-section .container .title {text-align: center; padding:10px; margin-bottom: 30px;}
.reviews-section .container .title .h1 {color: var(--bs-primary); font-weight: normal; margin-bottom: 20px; padding: 0;}

.screenshot-section .container .title {border-bottom: 1px solid var(--bs-primary);}
.screenshot-section .container .title {text-align: center; padding:10px; margin-bottom: 30px;}
.screenshot-section .container .title .h1 {color: var(--bs-primary); font-weight: normal; margin-bottom: 20px; padding: 0;}

.faq-section .container .title {border-bottom: 1px solid var(--bs-primary);}
.faq-section .container .title {text-align: center; padding:10px; margin-bottom: 30px;}
.faq-section .container .title .h1 {color: var(--bs-primary); font-weight: normal; margin-bottom: 20px; padding: 0;}




/* Featurettes
------------------------- */
.featurette-divider {margin: 5rem 0; /* Space out the Bootstrap <hr> more */}
/* Thin out the marketing headings */
.featurette-heading {font-weight: 300; line-height: 1; letter-spacing: -.05rem;}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 700px) {
  .carousel-item img {max-height: 200px !important;}
}
@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {margin-bottom: 1.25rem; font-size: 1.25rem; line-height: 1.4;}
  .featurette-heading {font-size: 50px;}
}
@media (min-width: 62em) {
  .featurette-heading {margin-top: 2rem;}
}


/*
3. Sections 
***************************************************************************/
.section {
  padding-bottom: 50px;
}
.section .container {
  padding-top:50px;
}
.section .title {
  text-align: center;
  padding:10px;
  margin-bottom: 30px;
}
.section .title h1 {
  font-weight: normal;
  margin-bottom: 20px;
  padding: 0;
}
.section .title > p {
  font-size: 20px;
  color: var(--bs-white);
  font-weight: lighter;
}
.primary-section {
  background:var(--bs-primary);
}
.primary-section .triangle {
  border-top: 40px solid var(--bs-yellow);
}
.primary-section .title {
  border-bottom: 1px solid var(--bs-white);
}
.primary-section, .primary-section .title p, .primary-section h3 {
  color: var(--bs-yellow);
}
.primary-section .h1 {
  color:var(--bs-white);
}

.sub-section {
  margin-top:30px;
}
.sub-section .title {
  padding:0;
}

/*******
3.1 Services  
***************************************/
.service{margin-top:20px;}
.service, .service h2 {padding-top:15px;}
.service p {padding:0px 50px; height:60px; color: var(--bs-white);}
.service img {width:150px; height:150px;}
.img-circle {-webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px;}
.circle-border {display: inline-block; -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; -khtml-border-radius: 500px; border: 3px solid var(--bs-white);}
.centered {margin-left:auto; margin-right:auto; float: none; text-align: center;}

.mask {
  background: var(--bs-yellow);
  opacity:0.85;
  filter: alpha(opacity=85);
  top:0;
  left:0;
  width:100%;
  height:100%;
  position:absolute;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2 s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

/*
3.5 Price table
******************************************************************/
.single-price {
  text-align: center;
  transition: .7s;
  margin-top: 20px;
  border: 1px solid #262626;
  border-radius: .25rem !important;
}
.single-price h3 {
  font-size: 25px;
  color: #000;
  font-weight: 600;
  text-align: center;
  color: #fff;
}
.single-price h4 {
  font-size: 48px;
  font-weight: 500;
  color: #fff;
}
.deal-top {
  position: relative;
  background: var(--bs-primary);
  font-size: 16px;
  text-transform: uppercase;
}
.deal-bottom {
  padding: 16px 16px 0;
}
.deal-bottom ul {
  margin: 0;
  padding: 0;
}
.deal-bottom  ul li {
  font-size: 16px;
  color: var(--bs-primary);
  font-weight: 300;
  margin-top: 16px;
  border-top: 1px solid #E4E4E4;
  padding-top: 16px;
  list-style: none;
}
.featured {
    background: var(--bs-yellow);
}