@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&family=Fuggles&family=Gabarito&family=Heebo:wght@100;400;800&family=Karla:wght@300;400;500&family=Lato:wght@300;400;700&family=League+Spartan:wght@400;500;700&family=Manrope:wght@300;400;600;700&family=Mitr:wght@300;400;600&family=Oswald:wght@300&family=Poppins:wght@200;300&family=Raleway:ital,wght@1,300&family=Roboto:wght@100;300;400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&family=Fuggles&family=Gabarito&family=Heebo:wght@100;400;800&family=Karla:wght@300;400;500&family=Lato:wght@300;400;700&family=League+Spartan:wght@400;500;700&family=Manrope:wght@300;400;600;700&family=Mitr:wght@300;400;600&family=Oswald:wght@300&family=Poppins:wght@200;300&family=Raleway:ital,wght@1,300&family=Roboto:wght@100;300;400&display=swap');

@font-face {
    font-family: SoDoSans;
    font-weight: 400;
    src: url(./assets/SoDoSans-Regular.woff);
}
@font-face {
    font-family: SoDoSans;
    font-weight: 300;
    src: url(./assets/SoDoSans-Light.woff);
}
@font-face {
    font-family: SoDoSans;
    font-weight: 600;
    src: url(./assets/SoDoSans-SemiBold.woff);
}
@font-face {
    font-family: SoDoSans;
    font-weight: 800;
    src: url(./assets/SoDoSans-Bold.woff);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: SoDoSans;
}

a{
    text-decoration: none;
}
ul{
    list-style: none;
}

/* LANDING PAGE */



.landing_page__navbar{
    max-width: 95%;
    margin: 0 auto;
    height: max-content;
  
    display: flex;
    justify-content: space-between;
    padding: 12px;
    align-items: center;
 
}
.landing_page__navbar--container{
    max-width: 4%;
   
}
.landing_page__navbar--logo{
    width: 100%;
}
#starbucks_logo{
    width: 100%;
}
.landing_page__navbar--list1{
    margin-right: auto;
    margin-left: 48px;
    display: flex;

    max-width: 20%;
    width: 100%;
    justify-content: space-between;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 18px;
    
}
.landing_page__navbar--list2{
    max-width: 24%;
    width: 100%;
    justify-content: space-between;
    display: flex;
    font-weight: 800;
  align-items: center;
 font-size: 14px;

}

.marker_icon{
    width: 5%;
    padding-top: 2%;
}

#marker_icon--pic{
    width: 100%;
}
.landing_page__navbar--item{
  
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 800;
   
}
.lighter__text{
    font-weight: 600;

}
.smaller__text{
    font-size: 14px;
    font-weight: 600;

}
.fa-bars{
  opacity: 0;
}
.landing_page__navbar--black-text{
     color: #403a3a;
}
#landing_page__navbar--sign-in{
   margin: 0 28px;
    border: 1px solid #000;
    padding: 8px 12px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
}
#landing_page__navbar--join-now{
    color: #fff;
    background-color: black;
    padding: 8px 12px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
}
.landing_page__sticky-header--container{
    max-width: 100%;
    display: flex;
    background-color: #1e3932;
    padding: 12px 0;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    box-shadow: 0px 1px 4px black;

 
}
.landing_page__sticky-header{
    max-width: 81%;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    font-size: 14px;
    font-family: SoDoSans, sans-serif;
    font-weight: 800;
    letter-spacing: 2px;

}
.landing_page__remaining-space{

display: flex;
align-items: center;
background-image: url(./assets/xl-hero-desktop_2021.jpg);
background-size: 140% 100% ;
background-repeat: no-repeat;
background-position: top center;
background-color: 
#d4e9e2;
padding: 16% 0;
width: 100%;
}
.landing_page__content{
    max-width: 100%;
    width: 100%;
    display: flex;
    margin-right: 30%;
    margin-left: 10%;
    flex-direction: column;
    align-items: flex-start;

}
.landing_page__content--header{
    font-family: SoDoSans, sans-serif;
    width: 25%;
   color: #111112;  
   font-size: 36px;
   padding-bottom: 12px;
   font-weight: 600;
}
.landing_page__content--para{
    font-family: SoDoSans, sans-serif;
    font-size: 20px;
    color: #111112;
    padding-bottom: 24px;
}
.landing_page__content--button{
 margin-bottom: 16px;
 padding: 8px 16px;
 border: none;
 border-radius: 25px;
 font-family: SoDoSans,sans-serif;
 font-weight: 600;
 color: #fff;
 background-color: 
 #008248;
 font-size: 16px;
}
.landing_page__content--button:hover{
    cursor: pointer;
}
#landing_page__content--link{
    text-decoration: underline;
    color: #111112;
}


/* GETTING STARTED */

#getting_started{

    padding-top: 8%;
    padding-bottom: 8%;
}
.row{
    max-width: 80%;
    margin: 0 auto;
    width: 100%;
 
}
.getting_started__header--container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.getting_started__header{
    font-family: SoDoSans, sans-serif;
    font-size: 28px;
    color: #403a3a; 
    padding-bottom: 12px;
    font-weight: 600;
}
.getting_started__subheader{
    color: #403a3a;
    font-family: SoDoSans, sans-serif;

    font-size: 16px;
    padding-bottom: 48px;
}
.getting_started__steps{
    display: grid;
    align-items: flex-start;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1em;

}
.getting_started__step--number{
    display: flex;
    justify-content: center;
    padding-bottom: 28px;
    align-items: center;


}
.getting_started__step{
    margin: 0 1em;
    padding: 0 12px;

}
.getting_started__step--number-head{
    color: 
    #008248;
    border-radius: 50%;
    padding: 8px 16px;   
    border: 2px solid 
    #008248;
    font-size: 20px;
    font-family: SoDoSans, sans-serif;
}
.getting_started__step--content{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.getting_started__step--content--header{
    
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 20px;
    padding-bottom: 16px;
    font-weight: 600;
    text-align: center;
    width: max-content;
    margin: 0 auto;
}
.getting_started__step--content--para{

    color: #403a3a;
    font-family: SoDoSans, sans-serif;
    font-weight: 500;
    text-align: center;
    width: 85%;
}
.underline_text{
    text-decoration: underline;
    color: 
    #008248;
}

/* FAVOURITES */

#favourites{
    padding-top: 3em;
    background-color: 
    #f1f8f6;

}
.favourites__content{
    max-width: 60%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.favourites__content--header--container{
    padding-bottom: 3em;
}
.favourites__content--header{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 28px;
    font-weight: 600;
}
.favourites__content--ratings{
    display: flex;

    width: 50%;
    justify-content: space-between;
    padding-bottom: 16px;

}
.favourites__content--rating{
    font-family: SoDoSans, sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #403a3a;
   
}
.stars{
    display: inline-flex;
    width: 12px;
    align-items: flex-end;
    
}
.favourites__drinks{
    background-color: 
    #d4e9e2;
    display: flex;
    align-items: center;
    justify-content: center;

   
}
.favourites__drinks--row{
    max-width: 50%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
   
}
.favourites__drinks--picture--container{
    width: 45%;
 padding-bottom: 5%;
 padding-top: 2%;
  
}
.favourites__drinks--picture{
    width: 100%;
}
#favourites__drink{
    width: 100%;
}
.favourites__drinks--content{
    width: 40%;
   
}
.favourites__drinks--content--header{
    color: #403a3a;
    font-family: SoDoSans, sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding-bottom: 1em;
}
.favourites__drinks--content--para{
    color: #403a3a;
    font-family: SoDoSans, sans-serif;
    font-size: 16px;
 
} 
/* EXTRAS */

#extras{
    padding: 8% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.extras__title--content{
    max-width: 40%;
    width: 100%;
margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.extras__title{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 28px;
    padding-bottom: 24px;
    font-weight: 600;
}
.extras__para{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
   font-weight: 500;
    text-align: center;
    padding-bottom: 48px;
}
.extras__items--list{
    display: flex;
max-width: 80%;
width: 100%;
margin: 0 auto;
justify-content: space-evenly;
align-items: flex-start;
}
.extras__item{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 30%;
}
.extras__item--pic--container{
    width: 25%;
    padding-bottom: 1em;
}
.extras__list--item--pic{
    width: 100%;
}
.extras__item--header{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 20px;
    padding-bottom: 1em;
    font-weight: 600;
}
.extras__item--para{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 1em;
}
.extras__item--links{
    color: 
    #008248;
    text-decoration: underline;
    font-family: SoDoSans, sans-serif;
    font-size: 16px;
}

/* STAR EARNING */

#star_earning{
    padding: 4% 0;
    background-color: 
    #f3f1e7;
}
.star_earning__header--content{
    max-width: 60%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.star_earning__header{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 28px;
    font-weight: 600;
    padding-bottom: 20px;
}
.star_earning__subheader{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    width: 65%;
    font-size: 16px;
    padding-bottom: 4em;
    text-align: center;
    font-weight: 500;
}
.star_earning__rows{
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.star_earning__row1, .star_earning__row2{
    display: flex;
    justify-content: center;
 
}
.star_earning__row1--item, .star_earning__row2--item{
    display: flex;
    width: 60%;
}
.star_earning__pic-container{
    width: 20%;
}
.star_earning__picture{
    width: 120px;
}

.star_earning__cash-amount{
    display: flex;
    flex-direction: column;
  width: 30%;
  color: #403a3a;
  font-family: SoDoSans, sans-serif;
  font-weight: 500; 
}
.star_earning__cash-amount--header{
    font-weight: 600;
}
.star_earning__row1--item--content, .star_earning__row2--item--content{
    display: flex;
    flex-direction: column;
}
.star_earning__row1--item--content, .star_earning__row2--item--content{
    display: flex;
    padding-left: 2em;
    font-family: SoDoSans, sans-serif;
}
.star_earning--row2--item--header, .star_earning--row1--item--header{
    font-size: 20px;
    padding-bottom: 16px;
    font-weight: 600;
}
.star_earning--row2--item--para, .star_earning--row1--item--para{
    width: 75%;
}
.horizontal__line{

    border: 0.5px solid #403a3a;
   filter: opacity(0.2);
    width: 100%;
    margin-bottom: 4em;
}

/* REWARDS COMING */

#rewards_coming{
    padding: 2%;
    background-image: url(./assets/844262945b2a8b8cfb293156e2583872.png);
    background-repeat: no-repeat;
}
.rewards_coming__content-box{

    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    background-color: 
    
#d4e9e2;
padding-left: 36px;

}
.rewards_coming__content-box--picture-container{
    width: 70%;
   
}
.rewards_coming__content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.rewards_coming__content--header{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 28px;
    padding-bottom: 20px;
    font-weight: 600;
}
.rewards_coming__content--para{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 16px;
    padding-bottom: 2em;
    font-weight: 500;
    text-align: center;
    width: 75%;
}
.rewards_coming__content--partnership{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1em;
}
.rewards_coming__content--partnership--container{
    width: 50%;
}
.rewards_coming__content--partnership--picture{
    width: 100%;
}
.rewards_coming__partnership--link{
    color: 
    #008248;
    text-decoration: underline;
}
.rewards_coming__content--button{
    background-color: 
    #008248;
    color: #fff;
    font-family: SoDoSans, sans-serif;
    font-weight: 600;
    padding: 4px 12px;
   border-radius: 25px;
} 

/* QUESTIONS */

#questions{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5% 0;
}
.questions__container{
    max-width: 70%;
    width: 100%;
    margin: 0 auto;
}.questions__container--header{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 28px;
    padding-bottom: 20px;
    font-weight: 600;
}
.questions__container--para{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 16px;
    padding-bottom: 20px;
    width: 55%;
    font-weight: 500;
    line-height: 24px;
}
.questions__container--link{
    color: #008248;
    text-decoration: underline;
}
.green__fab--icon{
    font-size: 12px;
    padding-left: 4px;
} 

/* TERMS OF USE */

#terms_of_use{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: 
    #faf9f9;
}
.terms_of_use__row{
    max-width: 85%;
    width: 100%;
    margin: 0 auto;
    padding: 3% 0;
}
.terms_of_use__top-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 24px;
}
.terms_of_use__top-content--para{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 14px;

    font-weight: 500;
    line-height: 24px;
}
.terms_of_use__top-content--link{
    color: #008248;
    text-decoration: underline;
}
.terms_of_use__row1, .terms_of_use__row2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 36px;
}
.terms_of_use__row1{
    padding-bottom: 36px;
}
.terms_of_use__item--header{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 14px;

 font-weight: 800;
 letter-spacing: 2px;
   padding-bottom: 20px;
}
.terms_of_use__item--para{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 14px;

    font-weight: 500;
    line-height: 24px;
    padding-bottom: 20px;
}
.terms_of_use__item--link{
    color: #008248;
    text-decoration: underline;
}

.long_horizontal_rule{
    margin-top: 3em;
    border: 1px solid 
    rgb(216, 222, 220);


}

/* CONTACT */

#contact_links{
    display: flex;
    justify-content: flex-start;
    padding: 3% 0;

}

.contact_links__row{
    max-width: 85%;
    width: 100%;
    margin: 0 auto;
   display: flex;
   justify-content: flex-start;
   gap: 2em;

   
}
.contact_links__item{
  display: flex;
  flex-direction: column;
  width: 15%;
}
.contact_links__item--header{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 20px;

font-weight: 500;

   padding-bottom: 20px;
}
.contact_links__item--list--item{
    padding-bottom: 20px;
}
.contact_links__item--list--link{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 16px;
}
.second_horizontal-rule{
    border: 1px solid 
    rgb(216, 222, 220);
   max-width: 85%;
   width: 100%;
   margin: 0 auto;

}

/* SOCIALS */

#socials{
    padding-top: 2%;
    padding-bottom: 5%;
}

.socials__row{
    display: flex;
    flex-direction: column;
    max-width: 85%;
    width: 100%;
    margin: 0 auto;
}


.socials__icons{
display: flex;
max-width: 12%;
justify-content: space-between;


}
.fab{
    font-size: 30px;
 padding-bottom: 1em;
}
.socials__headers{
    display: flex;
    align-items: center;
    width: 70%;
    justify-content: space-between;
    padding-bottom: 1em;
 
}
.socials__headers--links{
  
    color: #403a3a;

}
.socials__header{
    font-family: SoDoSans, sans-serif;
    flex: 1;
   padding-right: 20px;
   border-right: 1px solid #403a3a;
    font-size: 16px;
font-weight: 500;

}
.last__header{
    border-right: none;
}
.socials__copyright{
    max-width: 30%;
    width: 100%;
}
.socials__copyright--message{
    font-family: SoDoSans, sans-serif;
    color: #403a3a;
    font-size: 14px;
    font-weight: 400;
}

/* MEDIA QUERIES */

@media (max-width: 1420px){
    .landing_page__navbar--list2{
        max-width: 40%;
        justify-content: space-evenly;
    }
   
    .marker_icon{
        width: 3%;
        
    }
    .landing_page__navbar--list1{
        max-width: 50%;
        width: 100%;
        margin-left: 20px;
        justify-content: flex-start;
    }
    .landing_page__navbar--list1 .landing_page__navbar--item{
        padding: 10px;
    }
    .landing_page__remaining-space{
        background-size: 160% 120%;
    }
    .landing_page__content--header{
    max-width: 45%;
    width: 100%;
 }
 .favourites__content--ratings{
    width: 80%;
 }
 .favourites__drinks--content{
    width: 80%;
 }
 .favourites__drinks--content--para{
    width: 80%;
 }
 .favourites__drinks--row{
    padding: 2% 0;
 }
 .favourites__drinks--picture--container{
    width: 60%;
 }
}

@media (max-width: 992px){
    .landing_page__navbar--container{
        max-width: 6%;
    }
    .landing_page__navbar{
        padding: 12px;
    }
    .landing_page__navbar--list1{
        max-width: 40%;
        margin-left: 20px;
    }
    .landing_page__navbar--list2{
        max-width: 55%;
    }

    .smaller__text{
        padding-left: 10px;
    }
    .marker_icon{
     width: 4%;
    }
    .landing_page__content--header{
        max-width: 45%;
        width: 100%;
     }
     .landing_page__content{
        width: 100%;
     }
     .landing_page__remaining-space{
        background-size: 170% 120%;
        background-position-x: -17em;
    }
    .favourites__content--ratings{
        width: 90%;
    }
    .favourites__drinks--content{
        width: 90%;
     }
     .favourites__drinks--content--para{
        width: 90%;
     }
     .favourites__drinks--row{
        padding: 5% 0;
     }
     #getting_started .row{
        max-width: 70%;
        width: 100%;
        margin: 0 auto;
     }
     .extras__title--content{
        max-width: 60%;
     }
     .extras__item--pic--container{
        width: 50%;
     }
}
@media (max-width: 768px){
    
}