/* 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'
 */
/* Body */
body {
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 40px;
}
/* Header */
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 4rem;
}

/* Navbar */

.nav_list {
  display: flex;
  list-style: none;
}

.nav_link {
  text-decoration: none;
  color: grey;
}

.nav_link:hover {
  color: #f05a29;
}

.nav_item {
  padding: 14px;
}


/* Hero */
h1 {
  margin-bottom: -2px;
  font-weight: lighter;
  font-size: xx-large;
  padding-bottom: 4px;
}



h2 {
  font-weight: lighter;
  font-size: x-large;
  font-style: normal;
  margin-right: 40px;
}




.btn_learn_more {
  background-color: #f05a29;
  border-radius: 4px;
  border: 0;
  padding: 10px 20px;
  margin-top: 30px;
  font-size: medium;
}



.hero {
  display: block;
  color: white;
  font-weight: lighter;
  background-color: rgb(36, 6, 106);
  background-image: url(file:///Users/farnooshmoayeri/Documents/GitHub/HTML-CSS-Module-Project/img/first-background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 500px;
  /* padding-left: 50px;
  margin-left: 90px; */
}



.hero_wrapper {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding-top: 8rem;
  
}




/* article */
h3 {
  text-align: center;
  font-weight: lighter;
  font-size: xx-large;
  padding-top: 40px;
}




/* main */
p {
  margin-left: -25px;
  text-align: center;
}



.main {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10px;
}




/* footer */

hr {
  margin-top: 40px;
  margin-bottom: 40px;
  color: rgb(242, 242, 242);
}


.footer {
  /* border-radius: 50%;
  border: 1px solid rgb(204, 203, 203); */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}



.social_media {
  display: flex;
  align-items: center;
  margin: auto;
}



.join_us_on{
  text-align:center;
}



.end {
  font-size: small;
  text-align: center;
  margin: 5px;
  color: rgb(166, 162, 162);
}



#twitter,
#facebook,
#instagram {
  border-radius: 50%;
  border: 1px solid rgb(211, 205, 205);
  margin: 8px;
  padding: auto;
}


/* slogan */

.karma_slogan {
  display: flex;
  grid-column: 1 / -1;
  grid-gap: 50px;
  background-color: #f5d0c4;
}


.quotes{
  color: #f05a29;
}

.slogan {
  margin: 30px 60px;
  padding: 40px 70px;
  text-align: center;
}
/* .image_karma_slogan{
  /* background-image:url(img/homepage-feature.png); */
  /* background-size:cover;
  width:50%;
} */ 

.btn_get_karma_today {
  background-color: #f05a29;
  color: white;
  border-radius: 3px;
  border: none;
}

/* store */
/* form */
/* right */




.main_store {
  display: flex;
  width:100%;
  height:400px;
  gap:30px;
 padding:40px 0;
}

/* right section */


.right{
  width:50%;
  background-image:url(/Users/farnooshmoayeri/Documents/GitHub/HTML-CSS-Module-Project/img/store-image_by-andrew-neel-unsplash.jpg);
  background-color:red;
  background-size:cover;
  background-position:center;
  object-fit:cover;
   height:400px;
}


.text{
  color:#f05a29;
  margin-bottom:10px;
  text-align:center;
}


/* firstname/lastname */


.name_wrapper{
display:flex;
width:100%;
gap:2%;
margin-top:5px;
margin-bottom:5px;
}


.fname {
  width:50%;
}
.lname {
  width:50%;
}

/* address/address2 */

.address_input{
  margin-top:5px;
  margin-bottom:5px;
}


/* city/postcode */

.city_wrapper{
  display:flex;
  width:100%;
gap:100px;
margin-top:5px;
margin-bottom:5px;
  
}

.input_size {
  width:80%;

}


.city{
  width:150%;

}
.postcode{
  width:50%;
}

/* color form */

fieldset {
   border: none;
   padding: 0;
    margin: 0;
}

.radio{
padding-top:6px;
padding-bottom:30px;
}

.radio_color{
margin-bottom:9px;
}

/* right/bottom */

.tac{
  color: #f05a29;
}
.btn_place_my_order{
  background-color:#f05a29;
  color:white;
  border:none;
  margin:10px;
  padding:4px 3px;
  border-radius:3px;
  
}


/* right/image */

.left{
  width:50%;
  padding:40px
   height:400px;

}