@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap");

:root {
  --mainPink: #ef7998;
  --mainYellow: rgb(249, 228, 148);
  --mainWhite: #fff;
  --mainBlack: #000;
  --yellowTrans: rgba(249, 228, 148, 0.5);
  --mainGrey: rgb(238, 238, 238);
}

body {
  font-family: "Kaushan Script", cursive;
  background: var(--mainWhite);
  color: var(--mainBlack);
}

/*global styles*/
.btn-pink{
  color: var(--mainPink)!important;
  border-color: var(--mainPink)!important;
}

.btn-black{
  color: var(--mainBlack)!important;
  border-color: var(--mainBlack)!important;
}

.btn-black:hover{
  color: var(--mainPink)!important;
  background: var(--mainBlack)!important;
}

.btn-pink:hover{
  color: var(--mainBlack)!important;
  background: var(--mainPink)!important;
}

/*Nav links*/
.navbar-toggler{
  outline: none !important;
}

.toggler-icon{
  font-size: 2.5rem;
  color: var(--mainPink);
}

.nav-link{
  color: var(--mainPink);
  transition: all 1s ease-in-out;
  font-size: 1.5rem;
  margin-left: 45px;
}

.nav-link:hover{
  color: var(--mainBlack);
}

/* cart styles */
.cart-info__icon{
  color: var(--mainBlack);
  cursor: pointer;
}

#cart-info{
  border: 0.2rem solid var(--mainBlack);
  color: var(--mainBlack);
  border-radius: 0.25rem;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

#cart-info:hover{
  background: var(--mainPink);
  border-color: var(--mainPink);
  color: var(--mainWhite);
}

.cart-info__icon{
  color: var(--mainBlack);
}

.max-height{
  /*min-height: 100vh;*/ min-height: calc(100vh - 76px);
  background: url('../img/headerBcg.jpeg');
  /*background: linear-gradient(var(--yellowTrans),var(--yellowTrans));*/
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
}

.banner-title{
  color: var(--mainPink);
  margin-top: -4rem;
}

.banner{
  color: var(--mainBlack);
  margin-top: -4rem;
}

.banner-link{
  color: var(--mainBlack);
  font-size: 3rem;
  border: 0.15rem solid var(--mainBlack);
}

.banner-link:hover{
  color: var(--mainPink);
  background: none;
}

/*about styling*/
.about-img__container{
  position: relative;
}

.about-img__container::before{
  content: "";
  position: absolute;
  top: -1.5rem;
  left: -1.7rem;
  width: 100%;
  height: 100%;
  outline: 0.5rem solid var(--mainYellow);
  z-index: -1;
  transition: all 1s linear;
}

.about-img__container:hover::before{
  top: 0;
  left: 0;
}

/* errting store */
.store{                                /* store class at the beginning */
  background: var(--mainGrey);
}

.search-box{
  background: var(--mainPink);
  color: var(--mainWhite);
}

.single-item{
  transition: all 0.3 linear;
}

.single-item:hover{                    /* allows us to view the  shadow as we hover the single item box */
  box-shadow: 0 10px 15px rgb(0, 0, 0);
}

.img-container{
  position: relative;
  overflow: hidden;   /*prevents img from overflowin when we hover*/ 
  cursor: pointer;
}

.store-img{
  transition: all 1s ease-in-out;
}

/*Styling that will zoom in as we hover the store card images*/

.img-container:hover .store-img{                   /*shows the zoom in or out size, you can play with the scale value*/    
  transform: scale(1.2);
}

.store-item-icon{
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.75rem;
  background: var(--mainYellow);
  border-top-left-radius: 1rem;
  transition: all 1s ease-in-out;
  transform: translate(100%, 100%);
}

.img-container:hover .store-item-icon{                     /*card icon appears when hovered around*/
  transform: translate(0,0);
}

.store-item-icon:hover{                          /*card icon becomes white as the mouse touches it*/
  color: var(--mainWhite);
}

.services{
  background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url('../img/servicesBcg.jpeg') center/cover fixed no-repeat;  
  color: var(--mainWhite); 
  /*    long method
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
 background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
    */
}

.service-title{
  letter-spacing: 0.5rem;
}

.service-text{
  word-spacing: 0.5rem;
}


/*footer*/

.footer{
  background: var(--mainBlack);
}

.footer-contact{
  background: var(--mainGrey);
}

.footer-icon{
  font-size: 1.8rem;
  color: var(--mainWhite);
  transition: all 1s ease-in-out;
}

.footer-icon:hover{
  color: var(--mainPink);  
}

/*cart*/

.cart{
  position: absolute;
  min-height: 10rem;
  background: rgba(255,255,255,0.5);
  top: 0;
  right: 0;
  width: 0;
  overflow: hidden;
  transition: all 0.3 ease-in-out;
}
 
.show-cart{
  width: 18rem;
  padding: 2rem 1.5rem;
  transform: rotateY(-360deg);
}

.cart-item-remove{
  color: var(--mainPink);
  transition: all 1s ease-in-out;
}

.cart-item{
  transition: all 0.3 ease-in-out;
}

.cart-item-remove:hover{
  color: var(--mainBlack);
  transform: scale(1.1);
}

.cart-item-price{
  font-size: 0.8rem;
}