body{
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
   
} 


 /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 





/**
 * Add your custom styles below
 * 
 * Remember: 
 * - Be organised, use comments and separate your styles into meaningful chunks
 *    for example: General styles, Navigation styles, Hero styles, Footer etc.
 * 
 * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
 */






.header-container{

   display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

 .logo{
   padding-left: 50px;
   padding-top: 20px;
   width:30px;
 }


 .navbar{
   list-style-type: none;
   margin: 0;
   padding:0;
   display: flex;
   justify-content: flex-end;
   margin-right: 30px;
   gap:10px;
   
   
 }

 .navbar, a{
   text-decoration: none;
   color:#333333be;
 }

 .navbar a:hover{
   color:rgb(255, 94, 0);
 }


 .main-cover{
   width:300px;
  
 }

 .section-one{
   text-align: center;
   padding:10vw;
   background-image: url("/img/first-background.jpg" );
   background-size: cover;
   color:white;
   
   
   
 }

.learn-more-btn {
   background-color:rgb(255, 94, 0);
    border-radius: 4px;
    border:  rgba(192, 102, 19, 0.822)  ;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 30px;
    width:200px;
}




 .section-two-bar,ul{
   
   list-style-type: none;
   display: flex;
   gap:10rem;
   justify-content: center;

   

 }

 .section-two-bar img{
   width: 150px;
   
 }

 h4{
   text-align: center;
   padding: 20px;
 }

 hr{
   border: none;
   border-top: 2px solid #ddd;
 }





 .media{
   display: flex;
   gap:10rem;
   justify-content: center;
   
 }

 .media img{
   height: 50px;
   width: 50px;
   border: 1px solid #6159596c;
   border-radius: 70px;
   padding: 10px;


 }

.quote-container{
  background-color: bisque;
display: flex;
color: rgba(0, 0, 0, 0.541);


}

.quote-position{
  display: flex;
  flex-direction: column;
    align-content: center;
    justify-content: center;
    line-height: 2em;
    padding: 5em;

}






.button-quote{

  background-color:rgb(255, 94, 0);
    border-radius: 4px;
    border:  rgb(255, 128, 0)  ;
    color: white;
    width:200px;

}

.btn-color{
  background-color:rgb(255, 94, 0);
}


        .store-container {
            display: flex;
            justify-content: space-between;
            align-items: stretch; 
            padding: 20px;
            gap: 20px;
            min-height: 100vh; 
        }

        .form-container {
            width: 50%;
            padding: 20px;
            
        }

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color:  #f4623a;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .color-selection,
        .terms-container {
            display: flex;
            
            gap: 10px; 
        }

        input[type="text"],
        select,
        button {
            padding: 10px;
            margin-top: 5px;
            border-radius: 6px;
            border: 1px solid #ccc;
            width: 100%; 
          
      
        }

        .flex-container {
            display: flex;
            justify-content: space-between; 
        }

        .half-width {
            width: 48%; 
        }

       .submit-button {
            background-color: #f4623a;
              color: white;
            border: none;
            cursor: pointer;
            padding: 15px;
            font-size: 16px;
            margin-top: 20px;
        }

        button:hover {
            background-color: #d04a28;
        }

        .store-img {
            width: 100%;
    height: 100%; 
    object-fit: cover;
        }

        .aside-img-store {
            
            width: 50%; 
    justify-content: flex-end;
        }



@media  (max-width:568px){

  .section-two-bar,ul{
    list-style-type: none;
    display: flex;
    gap: 10rem;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .header-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
  
}
.logo {
  /* padding-left: 50px; */
  padding-top: 20px;
  width: 30px;
  padding-right: 60px;
  padding-bottom: 30px;
}
.media {
  display: flex;
  gap: 10rem;
  justify-content: center;
  flex-direction: column-reverse;
  align-content: center;
  align-items: center;
}
.quote-container {
    display: flex;
    flex-direction: column;
}
.flex-container {
    display: flex;
    flex-direction: column;
}
.store-container {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
}
.color-selection, .terms-container {
    display: flex;
    gap: 10px;
    flex-direction: column;
  }
    
}