/* Antes de tudo temos que resetar o CSS para ser mais facil de mexer, para isso marcaremos um asteristico*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 
/* Main style, da página toda*/
html,body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.7em;
}
a {
    color: #333;
    text-decoration: none;
}
h1, h2, h3 {
    padding-bottom: 20px;
}

p {
    margin: 10px 0;
} /* comummente paragrafos têm margem, mas acabamos de resetar, então, adicionamos aqui a margem que queremos.
okay - dia 11/05 de 2020 parei o codigo por aqui, vi até o momento 12:11 de vídeo, talvez mais tarde eu volte, mas
minha prioridade no momento são os exercicios

as 19:24 voltei a a mexer com CSS*/
/* No dia 12/05 de 2020 eu adicionei um container, e por ele ser um conteiner, coloqueiele acima da navbar*/
.container {
    margin: auto;
    max-width: 1100px;
    overflow: auto;
    padding: 0 20px;
}

.text-primary { /* utilidade pra escolher uma palavra pra colorir */
    color: #f7c08a;
}

.lead {
    font-size: 20px;
}

.btn {
    display: inline-block;
    font-size: 18px;
    color: #fff;
    background: #333;
    padding: 13px 20px;
    border: none;
    cursor: pointer;
}
.btn:hover {
    background: #f7c08a;
    color: #333;
}

.btn-light {
    background: #f4f4f4;
    color: #333;
}
.bg-dark {
    background: #333;
    color: #fff;
}
.bg-light {
    background: #f4f4f4;
    color: #333;
}
.bg-primary {
    background: #f7c08a;
    color: #333;
}
.clr {
    clear: both;
}
.l-heading {
    font-size: 40px;
    line-height: 1.2;
}
/* padding */
.py-1{ padding: 10px 0;}
.py-2{ padding: 20px 0;}
.py-3{ padding: 30px 0;}


/* A partir daqui vamos mexer na nossa navbar */

#navbar {
    background-color: #333;
    color: #fff;
    overflow: auto;
} /* Pras cores dos links ficarem corretas, precisamos marcar, por que senão elas não entram como texto */

#navbar a  {
    color: #fff;
}

#navbar h1 {
    float: left;
    padding-top: 20px;
}
/* Parado às 19:42 nos 14:13 minutos de video, dia 11/05 */

#navbar ul {
    list-style: None;
   float: right;
}

#navbar ul li {
    float: left;
}
#navbar ul li a {
    display: block;
    padding: 20px;
    text-align: center;
}
#navbar ul li a:hover, #navbar ul li a.current {
    background: #444;
    color: #f7c08a;
}
/*Showcase, a area grandona abaixo da navbar */
#showcase {
    background: url('../img/showcase.jpg') no-repeat center center/cover;
    height: 600px;
}

#showcase .showcase-content {
    color: #fff;
    text-align: center;
    padding-top: 170px;
}
#showcase .showcase-content h1 {
    font-size:60px;
    line-height: 1.2em;
}
#showcase .showcase-content p {
    padding-bottom: 20px;
    line-height: 1.7em;
}
/* home info, seção de informações na pagina principal */
#home-info {
    height: 450px;
}
#home-info .info-img {
    float: left;
    width: 50%;
    background: url('../img/photo-1.jpg') no-repeat;
    min-height: 100%;
}
#home-info .info-content {
    float: right;
    width: 50%;
    height: 100%;
    text-align: center;
    padding: 50px 30px;
    overflow: hidden;
}
#home-info .info-content p {
    padding-bottom: 30px ;
}
/* features */ 
.box {
    float: left;
    width: 33.3%;
    padding: 50px;
    text-align: center;
}

.box i {
    margin-bottom: 10px;
}

/* about info */
#about-info .info-right {
    float: right;
    width: 50%;
    min-height: 100%;
}

#about-info .info-right img {
    display: block;
    margin: auto;
    width: 70%;
    border-radius: 50%;
}
#about-info .info-left {
    float: left;
    width: 50%;
    min-height: 100%;
}

/*testmonials */
#testimonials {
    height: 100%;
    background: url('../img/test-bg.jpg') no-repeat center center/cover;
    padding-top: 100px;
}

#testimonials .testimonial img {
    width: 100px;
    float: left;
    margin-right: 20px;
    border-radius: 50%;
}
#testimonials .testimonial {
    padding: 20px;
    margin-bottom: 40px;
    border-radius: 5px;
    opacity: 0.9;
}
#testimonials h2 {
    color: #fff;
    text-align: center;
    padding-bottom: 40px ;
}
/*contact form */

#contact-form .form-group {
    margin-bottom: 20px;
}
#contact-form label {
    display: block;
    margin-bottom:5px;
}
#contact-form input, #contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px #ddd solid;
}
#contact-form textarea {
    height: 200px;
}

#contact-form input:focus, #contact-form textarea:focus {
    outline: none;
    border-color:#f7c08a;
}
/* footer*/
#main-footer {
    text-align: center;
    background: #444;
    color: #fff;
    padding: 20px;
}

::selection {
   background: #f7c08a;
   color: #fff;
}
::-webkit-scrollbar {
    width:10px;
    height: 10px;
    }
::-webkit-scrollbar-track {
        background:#444;
        }
::-webkit-scrollbar-thumb {
 background: #333;
            }