*{
    margin:0;
    padding:0;
    font-family: Avenir-Roman, sans-serif;
    font-size: 16px;
    color:#f9f9f9;
}

#navbar{
    background-color:#040714;
    padding:10px;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
#login-btn{
    padding:10px;
    background:#090b13;
    color:#f9f9f9;
    border:1px solid #f3f3f3;
    border-radius:4px 4px 4px 4px;
    cursor:pointer;
}


#main-body{
    /* background: linear-gradient(180deg,#090b13e8,#090b13); */
    background: linear-gradient(to left,#1e2532,#040713);
}
#slider{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#slider img{
    width:80%;
      border:2px solid #343741;
    border-radius:5px 5px 5px 5px;
    margin:5px;
    box-shadow: 0 8px 10px #000000;
}

#brands{
    padding: 20px;
}
#brands img{
      height:200px;
    width:300px;
    border:2px solid #343741;
    border-radius:5px 5px 5px 5px;
    margin:5px;
    box-shadow: 0 8px 10px #000000;
}

#container{
    padding:20px;
    background: #040713;
}
.section{
    margin:25px 0;
}
.section h3{
    margin-bottom: 12px;
}
.section-body{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:wrap;
}
.section-body img{
    height:200px;
    width:300px;
    border:2px solid #343741;
    border-radius:5px 5px 5px 5px;
    margin:5px;
    box-shadow: 0 8px 10px #000000;
}


@media only screen and (max-width: 600px) {
  .section-body img{
    height:120px;
    width:140px;
}

}




    .dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}