/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

html {
  scroll-behavior: smooth;
}

.navbar-dark,
body{
  background-image: url(img/the_end.svg), url(img/school_pattern.svg);
  background-size: 100%, contain;
  background-repeat: repeat-x, repeat;
  background-position: left bottom, left top;
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;  
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */

.carousel-header .carousel {
  margin-bottom: 4rem;
}

.carousel-header{
  background-image: url(img/wood.svg), url(img/bg_dots.png);
  background-position: left bottom, left top;
  background-repeat: repeat-x, repeat;
  background-color: #f8f9fa; 
  padding-top: 24px;
  margin-bottom: 3rem;
}

.carousel-customers{
  width: 100%;
}

.carousel-customers .carousel-inner{
  margin-bottom: 3rem;
}

.carousel-header .carousel-indicators{
  margin-bottom: 1.5rem; 
}

.carousel-customers .carousel-indicators li {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    background-color: #999999;
}

.carousel-customers .carousel-indicators .active {
    background-color: #1a5b9c;
}

.carousel-customers img{
  filter: grayscale(1);
  transition: all 0.5s ease;
}

.carousel-customers img:hover{
  filter: grayscale(0);
}

.carousel-header .carousel-indicators li {    
    height: 8px;
    margin-right: 8px;
    border-radius: 20px;
    border: none;
    background-color: #c99b5a;
}

.carousel-header .carousel-indicators .active {
    background-color: #007bff;

}

.carousel-header .carousel-caption{
  color: #336dcd;
  position: relative;
  left: auto;
  right: auto;  
}

.carousel-header .carousel-caption p {
    color: #142d47;
    text-align: left;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaaaaa' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaaaaa' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")
}

.carousel-inner {
    position: relative;
    width: 70%;
    overflow: hidden;
    left: 15%;
    right: 15%;
}
/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.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;
}


/* 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 (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: 7rem;
  }
}

footer{
  margin-top: 4rem;
}

.text-muted {
    color: #4bbb2d !important;
}

.navbar-light .navbar-nav a {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    transition: all 0.5s ease;
}

.navbar-light .navbar-nav a.active {
    border-bottom-color: #4bbb2d;
}

h2.featurette-heading {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 60px;
    background-size: contain;
}

.nav-item{
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 32px;
}

@media (min-width: 768px){
  .nav-item{
      background-image: none !important;
      padding-left: 0;
  }
}

li.nav-item.home{
  background-image: url(img/icon-home.svg);
}


li.nav-item.features,
h2.features{
  background-image: url(img/icon-features.svg);
}

li.nav-item.pricing,
h2.pricing{
  background-image: url(img/icon-pricing.svg);
}

li.nav-item.contact-us,
h2.contact-us{
  background-image: url(img/icon-contact-us.svg);
}

li.nav-item.customers,
h2.customers{
  background-image: url(img/icon-group.svg);
}



ul.contact-us{
  list-style: none;
  padding:0;
  margin:2rem 0 0 0;
}

ul.contact-us>li{
  background-repeat: no-repeat;
  padding-left: 32px;
  line-height: 24px;
  background-position: left center;
  margin: 1rem 0;
}

ul.contact-us>li.email{
  background-image: url(img/icon-mail.svg);
}

ul.contact-us>li.phone{
  background-image: url(img/icon-phone.svg);
}

ul.contact-us>li.phone-w{
  background-image: url(img/icon-whatsapp.svg);
}

ul.contact-us>li.location{
  background-image: url(img/icon-location.svg);
}

.btn-secondary {
    color: #fff;
    background-color: #4bbb2d;
    border-color: #5bcb3d;
}

.btn-secondary:hover {
    background-color: #5bcb3d;
    border-color: #6bdb4d;
}