/* Universal selector */
* {
    box-sizing: boarder-box;
}

/* Tag Selector Elements */
body {
    margin: 0;
    /* padding: 0; */
    font-family: 'Montserrat', sans-serif;
    /* background-color: #FAF7F0; */
}

/* Monserrat-Black is not working */
h1 {
    /* font-family: 'Sacramento', cursive; */
    /* font-size: 2.2rem;
    font-weight: bold; */
    font-family: "Montserrat-Black";
    font-weight: bold;
    size: 2.5rem;
    line-height: 1.5;
    /* color: #132C33; */
    color: #DC5F00;
}

/* .main-h1 {
    color: #CF0A0A;
} */

h2 {
    color: #DC5F00;
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 3rem;
    line-height: 1.5;
}

h3 {
    color: #DC5F00;
    font-family: 'Montserrat-bold', sans-serif;

}

p {
    color: #DC5F00;
    font-family: 'Montserrat', sans-serif;
}


/* Navigation Bar / Title -----------------------------------------------*/

    /* NavBar Parent */
.navbar {
    margin-bottom: 4.5rem;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

    /* QF logo */
.navbar-brand {
    font-family: 'Ubuntu';
    font-size: 1.6rem;
    font-weight: lighter;   
    color: #DC5F00;
    /* padding-left: 10px; */
    position: relative;
}

.navbar-brand:hover{
    color: #CF0A0A;
}

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

/* button Hamburger */
button.navbar-toggler {
    margin-right: 10px;
    color: #DC5F00;
    /* color: #132C33; */
    background: #DC5F00;
}

/* Un-ordered List <ul> within the navigation bar */
/* .navbar-nav { */
/**/
/* } */

/* <li> and  the <a> within the <li> links */
.nav-link {
    color: #DC5F00;
    /* color: #FAF7F0; */
    font-size: 1.2rem;
    font-family: 'Montserrat-Light';
    font-weight: lighter;

}

.nav-link:hover{
    color: #CF0A0A;
}
/* Navigation Bar End -----------------------------------------------*/


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

#title {
    background-color: #000000;
    /* color: #FAF7F0; */
    position: relative;
}

/* <section> title */
.h1-felipe {
    color: #DC5F00;
}

/* LinkedIn title links */
.title-link {
    margin: 5% 3% 5% 0;
}

.title-image {
    width: 55%;
    border-radius: 18%;
    margin-left: 145px;
    margin-top: 15px;
    /* transform: rotate(0deg); */
}
/* Title End */

/* #001253; Use this color for the next div background color */



/*  Mission -Title */

/* Mission parent section */
#mission {
    background: #1D1616;
    padding: 7% 15%;
}

/* Mission section three divs */
.mission-box {
    text-align: center;
    padding: 5%;
    color: #DC5F00;
    /* color: #FAF7F0; */
}

/* Mission three images */
.mission-img {
    width: 25%;
    margin-bottom: 5px;
}
/* .mission-img:hover {
    color: #FAF7F0;
} */

/*  Mission -End */


/* Testimonials Start */

#testimonials {
    text-align: center;
    background: #000000;
    color: #DC5F00;
}

.testimonial-image {
    width: 10%;
    border-radius: 100%;
    margin: 20px;
}

    /* Carousel  Start */
.carousel-item {
    height: 400px;
    padding: 7% 15%;
    margin-bottom: 190px;
  }
      /* Carousel Images */
  /* img {
    width: 10%;
    height: 40%; 
    border-radius: 100%;
  }  */

  /* Carousel Slide h2 1 - 3 */
.carousel-one {
    /* color: #FAF7F0; */
    color: #DC5F00;
    font-size: 1.2rem;
}
.carousel-two {
    /* color: #FAF7F0; */
    color: #DC5F00;
    font-size: 1.2rem;
}
.carousel-three {
    /* color: #FAF7F0; */
    color: #DC5F00;
    font-size: 1.2rem;
}

/* Carousel Buttons I want to change the color of the arrow */

 /* .arrow {
    color: #132C33;
    } */

/* button {
    color: #132C33;
}  */

    /* Carousel End */


/* Testimonials End */

/* Social Media Section Start */

#social-media {
    background:#1D1616;
    text-align: center;
    padding-bottom: 3%;
    padding-left: 27%;
    /* padding-right: 9%; */
    padding-right: 25%;
}

.social-box {
    text-align: center;
}

.social-links-felipe {
    color: #0d6efd;
    margin: 10% .5% 10% .5%;
    font-size: 90%;
}
/* Social Media Section End */

 /* Strategy -Pricing Start  */

#strategy {
    background: #1D1616;
    padding: 100px;
}

.strategy-card {
    color: #DC5F00;
    padding: 3% 2%;
}

.card-body {
    background: #000000;
}


/* Media Query Start */
@media (max-width: 1028px) {
#title {
    text-align: center;
    }
    /* Fixed using margin: auto; below. When I center the image via the padding-right. The bug that causes the image to shrink is the paddin-right below */
/* .title-image {
padding-right: 150px;
position: relative;
} */
}

    /* This fixes(still has a bug) the bug where the image shrinks in size between the browser window width size of 992px - 1028px. */
@media (max-width: 1028px) and (max-height: 1028px) {
.title-image  {
    margin: auto;
    padding-top: 10px;
}

}
@media (max-width: 991px) and (max-height: 991px) {
.title-image  {
    margin: auto;
    padding-top: 10px;
}

}
/* Media Query End */

  /* Strategy -Pricing End  */
/* Pricing/Strategy section is overlapping the CTA and Footer? Look at title imagine for guidance? */
  /* Call to Action Start */
#cta-calendly {
    height: 50vh;
    width: 100%;
    /* margin-top:10px; */
    background: #000000;
    color: #FAF7F0;
    padding: 7% 15%;
    text-align: center;
}

.cta-header {
    font-family: "Monserrat-Black";
    font-size: 2.5rem;
    line-height: 1.5;
}

.cta-link {
    text-decoration: none;
}

 /* The cta-btn:hover code below breaks the footer ID */
/* .cta-btn:hover {
    background: #132C33;
} */


  /* Call to Action End */
/* Pricing/Strategy is overlapping the CTA and Footer? Look at title imagine for guidance? */
  /* Footer start */

#footer {
    width: 100%;
    margin-top:10px;
    text-align: center;
  }
  /* .footer-div {
    height: 5vh;
    width: 100%;
} */

.footer-p {
    color: #132C33;
    font-size: .8rem;;
}




  /* Footer End */