@import url("https://fonts.googleapis.com/css?family=Lato:400,700");

:root {
  /* --primaryColor: #f09d51; */
  --primaryColor: #D2EEFF; 
  
  --mainWhite: #fff;
  --mainBlack: #222;
  --mainGrey: #ececec;
  --navBarColor: #A5DDF9;
  --highligtColor: #2b80aa;
  --mainSpacing: 0.1rem;
  --mainTransition: all 0.3s linear;
  --transition: all 0.3s linear;
  --spacing: 0.1rem;
  --radius: 2rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  color: var(--mainBlack);
  background: var(--primaryColor);
  font-family: "Lato", sans-serif;
}
a {
  text-decoration: none;
}
img {
  width: 100%;
}
main {
  min-height: 85vh;
  display: grid;
  place-items: center;
}
.section {
  padding: 4rem 0;
}

.section-center {
  width: 90vw;
  margin: 0 auto;
  max-width: 1170px;
}
@media screen and (min-width: 992px) {
  .section-center {
    width: 95vw;
  }
}

/* --------------- Navbar ---------------- */
.navbar {
    position: fixed;
    top: 0;
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    /* background-image: linear-gradient(to right, #1c3c66, #3e769b, #809fc5); */
    background: var(--navBarColor);
    z-index: 3;
  }
  .navbar-center {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
  }
  .nav-logo img {
    /* padding: 10px; */
    height: auto;
    width: 200px;
  }
  .nav-icon {
    font-size: 1 rem;
    
  }
  .cart-btn {
    position: relative;
    cursor: pointer;
  }
  .cart-items {
    position: absolute;
    top: -8px;
    right: -9px;
    background: var(--mainGrey);
    padding: 0 5px;
    border-radius: 30%;
    color: var(--mainBlack);
  }
  /* --------------- End of Navbar ---------------- */

.index-container{
  min-height: calc(80vh - 60px);
  
}

  /* --------------- Hero ---------------- */
.hero {
    /* position: relative; */
    z-index: 1;
    margin-top: 110px;
    /* min-height: calc(80vh - 60px); */
    width: 100%;
    
    background: var(--primaryColor);
    /* background: url("../images/hero-mobile.jpg") center/cover no-repeat; */
    /* display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row; */
    /* flex-wrap: wrap; */
    gap: 20px; 
    /* overflow: auto; */
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1.5rem;
    grid-row-gap: 2rem; */
  }
  .hero2 {
    /* position: relative; */
    z-index: 1;
    /* min-height: calc(80vh - 60px); */
    width: 100%;
    height: auto;
    background: var(--primaryColor);
    /* background: url("../images/hero-mobile.jpg") center/cover no-repeat; */
    /* display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;  */
    /* overflow: auto; */
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1.5rem;
    grid-row-gap: 2rem; */
  }
  .banner {
    
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-direction: row;
    gap: 10px;
   
  }
  .promo {
    /* position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 1.5rem; */
    /* text-align: center; */
    /* background: rgba(245, 242, 240, 0.8); */
    display: flex;
    align-items: center;
    justify-content: center; 
    /* padding: 2rem; */
  }
  
  .addcart-btn{
    padding: 10px ;
    background: var(--primaryColor);
    height:auto;
    transition: var(--mainTransition);
    cursor: pointer;
  }
  .banner-btn {
    /* margin: 0 20px; */
    padding: 10px ;
    background: var(--primaryColor);
    height:auto;
    transition: var(--mainTransition);
    cursor: pointer;
    border-radius: var(--radius);
  }
  .banner-btn:hover {
    background: var(--navBarColor);
  }
  .banner-btn img{
    border-radius: var(--radius);
  }
  .promo-btn {
    width: 100%;
    padding: 10px ;
    background: var(--primaryColor);
    height:auto;
    transition: var(--mainTransition);
    cursor: pointer;
    border-radius: var(--radius);
  }
  .promo-btn:hover {
    background: var(--navBarColor);
   
  }
  .promo-btn img{
    border-radius: var(--radius);
  }
  /* --------------- End of Hero ---------------- */

  /* --------------- Products ---------------- */

.products {
    padding: 4rem 0;
  }
  .old_price {
    text-decoration: line-through;
    color: #999;
  }
  .section-title h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 5rem;
    text-transform: capitalize;
    letter-spacing: var(--mainSpacing);
  }
  .section-title h3 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 5rem;
    text-transform: capitalize;
    letter-spacing: var(--mainSpacing);
  }
  .products-center {
    width: 90vw;
    margin: 0 auto;
    max-width: 1170px;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 1.5rem;
    grid-row-gap: 2rem;
  }
  .img-container {
    position: relative;
    overflow: hidden;
  }
  .bag-btn {
    position: absolute;
    top: 70%;
    right: 0;
    background: var(--primaryColor);
    border: none;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem;
    letter-spacing: var(--mainSpacing);
    font-weight: bold;
    transition: var(--mainTransition);
    transform: translateX(101%);
    cursor: pointer;
  }
  .bag-btn:hover {
    color: var(--mainWhite);
  }
  .fa-shopping-cart {
    margin-right: 0.5rem;
  }
  .img-container:hover .bag-btn {
    transform: translateX(0);
  }
  .product-img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 12rem;
    transition: var(--mainTransition);
    border-radius: var(--radius);
  }
  .img-container:hover .product-img {
    opacity: 0.5;
  }
  
  .product h3 {
    text-transform: capitalize;
    font-size: .9rem;
    margin-top: 1rem;
    letter-spacing: var(--mainSpacing);
    text-align: center;
  }
  
  .product h4 {
    margin-top: 0.7rem;
    letter-spacing: var(--mainSpacing);
    color: var(--mainBlack);
    text-align: center;
  }
  
  /* ---------------End of Products ---------------- */
  
  /* --------------- Cart ---------------- */
.cart-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: var(--mainTransition);
    background: rgb(44, 212, 254, 0.5);
    z-index: 4;
    visibility: hidden;
  }
  .cart {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;
    z-index: 3;
    background: rgb(231, 226, 221);
    padding: 1.5rem;
    transition: var(--mainTransition);
    transform: translateX(100%);
  }
  .showCart {
    transform: translateX(0);
  }
  .transparentBcg {
    visibility: visible;
  }
  .close-cart {
    font-size: 1.7rem;
    cursor: pointer;
  }
  .cart h2 {
    text-transform: capitalize;
    text-align: center;
    letter-spacing: var(--mainSpacing);
    margin-bottom: 2rem;
  }
  /*---------- Cart Item -------------------- */
  .cart-item {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    grid-column-gap: 1.5rem;
    margin: 1.5rem 0;
  }
  .cart-item img {
    width: 75px;
    height: 75px;
  }
  .cart-item h4 {
    font-size: 0.85rem;
    text-transform: capitalize;
    letter-spacing: var(--mainSpacing);
  }
  .cart-item h5 {
    margin: 0.5rem 0;
    letter-spacing: var(--mainSpacing);
  }
  .item-amount {
    text-align: center;
  }
  .remove-item {
    color: grey;
    cursor: pointer;
  }
  .fa-chevron-up,
  .fa-chevron-down {
    color: var(--primaryColor);
    cursor: pointer;
  }
  /*---------- End of Cart Item -------------------- */
  .cart-footer {
    margin-top: 2rem;
    letter-spacing: var(--mainSpacing);
    text-align: center;
  }
  .cart-footer h3 {
    text-transform: capitalize;
    margin-bottom: 1rem;
  }
  /* --------------- End of Cart ---------------- */

  /* footer container */
.footer-container {
  
  width:100vw; 
  background-color: var(--secondary-color);
  position: relative;
  bottom: 15;
}
.brand-section {
  width: 80%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin: 30px auto;
}
.brand-section img {
  width: 16%;
}
.social-section {
    display: flex;
    justify-content: center;
    padding: 20px;
    flex-wrap: wrap;
    flex-direction: row; 
}
.social-section a {
  color: var(--clr-white);
  padding: 20px;
  font-size: 170%;
}
.copyright-text {
  margin: 20px;
  font-size: 60%;
  color:rgb(189, 186, 186);
  }
  .copyright-text a {
   
    color:rgb(189, 186, 186);
    }
 
/* carousels  */
.categories {
  max-width: 900px;
  margin: auto;
}    

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
}

.see-all {
  font-size: 1.1rem;
  text-decoration: none;
  color: #007bff;
  border: 1px solid #e0e0e0;
  padding: 8px 16px;
  border-radius: 25px;
  background-color: #fff;
  transition: background 0.3s;
}

.see-all:hover {
  background-color: #f0f0f0;
}

.carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

.card {
  flex: 0 0 auto;
  width: 120px;
  height: 130px;
  border-radius: 15px;
  /* background-color: #e3f0ea; */
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  text-align: center;
  transition: transform 0.3s;
}

/* .card:nth-child(2) {
  background-color: #f2d8ea;
} */

.card img {
  width: 70%;
  height: auto;
  object-fit: contain;
  margin-bottom: 10px;
}

.card p {
  font-size: .5rem;
  color: #333;
  font-weight: 500;
}

.card:hover {
  transform: scale(1.05);
}


#img1 {display:block;}
#img2 {display:none}

@media all and (max-width: 499px) {
    #img1 {display: none;}
    #img2 {display: block;}
}

  @media screen and (min-width: 768px) {
    .products-center { 
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .product h3 {
      font-size: 1.1rem;
    }


    .card { 
      width: 220px;
      height: 180px;
    }
    .card p {
      font-size: 1rem;
    }

    .cart {
      width: 30vw;
      min-width: 450px;
    }
    /* .hero {
      background: url("../images/hero-toybox.jpg") center/cover no-repeat;
    } */
    .banner-title {
      font-size: 3.4rem;
    }
    .copyright-text {
      font-size: 80%;
    }
    .nav-logo img {
      padding: 10px;
      height: 110px;
      width: 100%;
    }

    
    .nav-icon {
      font-size: 1.5rem;
    }
    .banner-btn {
      height:200px;
    }
    .promo-btn {
      width: 60%;
    }
  }

  /* typography */
.u-text-center {
  text-align: center;
}
.u-text-upper {
text-transform:uppercase;
}

/* contact us and reservation */
.signup-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 90%; 
  padding: 20px;
  box-shadow: 5px 10px 18px var(--mainBlack);
  background-color: var(--navBarColor);
  margin: 0 auto;
}
.signup-form input {
  width: 100%;
  font-size: 14px;
  padding: 14px;
  /* font-family: var(--ff-secondary); */
  margin: 20px auto;
  border: none;
 border-radius: .5rem;
}
.signup-form select {
  width: 100%;
  font-size: 14px;
  padding: 14px;
  border-radius: var(--radius);
  /* font-family: var(--ff-secondary); */
  margin: 20px auto;
}
.signup-form textarea {
  width: 100%;
  font-size: 14px;
  padding: 14px;
  border-radius: var(--radius);
  /* font-family: var(--ff-secondary); */
  margin: 20px auto;
}

/* button */
.button-container {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  max-width: 20rem;
}

.button-primary {
text-transform: uppercase;
border-radius: var(--radius);
transition: var(--transition);
background: rgb(38, 97, 185);
color: white;
width: 80%;
border: none;
padding: 12px 40px;
margin: 10 auto;  
cursor: pointer;
}
.button-primary:hover {
background: blue;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}
.button-secondary {
text-align: center;
text-transform: uppercase;
border-radius: var(--radius);
transition: var(--transition);
background: var(--tertiary-color); 
width: 50%;
border: none;
padding: 12px 40px;
margin: 10 auto;  
cursor: pointer;
}
.button-secondary:hover {
background: var(--clr-grey-5);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}

/* Notification */
.notification {
padding: 15px;
margin: 10px auto;
border: 1px solid transparent;
border-radius: 4px;
width: 90%;
}

.mynotif-is-success{
background-color:#D1EED8;
color: green;
}

.mynotif-is-danger{
background-color:#FFD7D6;
color: red;
}