/* Google font  */
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
  --color: #be9c79;
  --box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}
/* Variables */
:root {
  --main-color: #54372a;
  --second-color: #df582e;
  --text-color: #060413;
  --container-color: #f8e4be;
  --bg-color: #f9f6f2;
  --text-alter-color: #94908e;
  --poppins-font: "Poppins", sans-serif;
  --font-family-2: "Playfair Display", serif;
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #df582e;
  --black-color: hsl(0, 0%, 0%);
  --black-color-light: hsl(0, 0%, 40%);
  --white-color: hsl(0, 0%, 95%);
  --title-color: hsl(0, 0%, 0%);
  --text-color-light: hsl(0, 0%, 64%);
  --body-color: hsl(0, 0%, 87%);
  --container-color: hsl(0, 0%, 83%);
}
* {
  font-family: 'Nunito', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: capitalize;
  transition: all 0.2s linear;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}
html::-webkit-scrollbar {
  height: 0.5rem;
  width: 1rem;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  background: var(--color);
}

section {
  padding: 3rem 9%;
}
.btn {
  display: inline-block;
  padding: 0.8rem 3rem;
  font-size: 1.7rem;
  color: var(--color);
  border-radius: 0.5rem;
  cursor: pointer;
  border: 0.2rem solid var(--color);
  margin-top: 1rem;
}
.btn:hover {
  background: var(--color);
  color: #fff;
}
/* header css */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 9%;
  background: #fff;
  box-shadow: var(--box-shadow);
}
.header .logo {
  font-size: 2.5rem;
  font-weight: bolder;
  color: #222;
}
.header .logo i {
  color: var(--color);
}
.header .navbar a {
  font-size: 1.7rem;
  margin: 0 1rem;
  color: #222;
}
.header .navbar a.active {
  color: var(--color);
  font-weight: bold;
}
.header .navbar a:hover {
  color: var(--color);
}
.heading .navbar {
  margin-bottom: 2rem;
}
.heading .navbar a {
  font-size: 1.7rem;
  margin: 0 1rem;
  color: #222;
}
.heading .navbar a.active {
  color: var(--color);
}
.heading .navbar a:hover {
  color: var(--color);
}
.heading .navbar a.active {
  color: var(--color);
  font-weight: bold;
}

.header .icons div {
  height: 4.5rem;
  width: 4.5rem;
  line-height: 4.5rem;
  border: .1rem solid var(--color);
  color: var(--color);
  border-radius: 0.5rem;
  font-size: 2rem;
  margin-left: 2rem;
  cursor: pointer;
  text-align: center;

}
.header .icons div:hover {
  background: var(--color);
  color: #fff;
}
#menu-btn {
  display: none;
}
.header .search-form {
  position: absolute;
  top: 110%;
  right: -110%;
  width: 50rem;
  height: 5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: var(--box-shadow);

}
.header .search-form.active {
  right: 2rem;
  transition: 0.4s linear;
}
.header .search-form input {
  width: 100%;
  height: 100%;
  padding: 0 1.5rem;
  font-size: 1.6rem;
  color: var(--color);
  background: none;
  text-transform: none;
}
.header .search-form label {
  font-size: 2.2rem;
  color: var(--color);
 padding-right: 1.5rem;
 cursor: pointer;
}
/* end header css */

/* sub-heading */
.sub-heading {
  text-align: center;
  padding-top: 10rem;
  padding-bottom: 1rem;
}
.sub-heading h1 {
  font-size: 4rem;
  color: var(--color);
  font-family: 'Merienda', cursive;
}
/* home css */
.home {
    position: relative; /* Establish a containing block for absolutely positioned elements */
    min-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ensure the background image does not overflow */
}

.home .content {
    position: relative; /* Ensure the content is positioned relative to the .home container */
    z-index: 2; /* Ensure the content is on top of the background image */
    text-align: center;
    color: white; /* Adjust text color for better visibility */
    padding-bottom: 25rem;
    padding-right: 25rem;
}

.home .home-image {
    position: absolute; /* Position the image absolutely within the .home container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensure the image is behind the content */
    overflow: hidden;
    animation: dissolve-in 2s forwards; /* Apply the dissolve-in animation */
}

.home .home-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the image covers the entire container */
    opacity: 0.5; /* Optional: Add opacity to the image for better text visibility */
}
@keyframes dissolve-in {
  to {
      opacity: 1; /* End with the image fully opaque */
  }
}
.home .content h3 {
  font-size: 4rem;
  color: var(--color);
  font-family: 'Merienda', cursive;
}
.home .content p {
  font-size: 1.6rem;
  color: #222;
  padding: 1rem 0;
  line-height: 2;
}

/* end home css */

/* about css */
.about-content {
  padding-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, auto));
  gap: 2.5rem;
}
.about-box img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 1rem;
}
.about-box h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #222;
  margin-top: 2rem;
}
.about-box p {
  font-size: 1.2rem;
  color: #222;
  margin-top: 1rem;
}
.about-box span {
  color: #222;
  font-size: 1.5rem;
}
.about-box img {
  transition: transform 0.3s ease-in-out; /* Smooth transition for the transform property */
}

.about-box img:hover {
  transform: scale(1.1); /* Scale the image up by 10% on hover */
}
.about {
  padding-top: 5px;
}
.story-content {
    display: flex; /* Display the text and image content side by side */
    align-items: center; /* Center items vertically */
    gap: 1rem; /* Space between the text and image */
    padding-left: 0;
}
.story{
  padding-top: 5rem;
 
}
.content-wrapper {
    background-color: var(--white-color); /* Set the background color of the content wrapper */
    padding: 4rem 2rem; /* Add padding around the content */
    border-radius: 1rem; /* Rounded corners for the content wrapper */
    padding-left: 0;
  }

.text-content {
    flex: 1; /* Allow the text content to take up available space */
}
.text-content h3 {
    font-size: 2.5rem; /* Set the font size of the heading */
    color: #222; /* Set the color of the heading */
    margin-bottom: 2rem; /* Add space between the heading and paragraph */
}
.text-content p {
    font-size: 1.6rem; /* Set the font size of the paragraph */
    color: #222; /* Set the color of the paragraph */
    margin-top: 2rem; /* Add space between the heading and paragraph */
    text-align: justify;
    padding-right: 2rem;

}
.image-content {
    flex: 1; /* Allow the image content to take up available space */
    display: flex; /* Display the image content as a flex container */
    justify-content: center; /* Center the image horizontally */
    margin-right: 0.5rem; /* Add space between the text and image */
  
}

.image-content img {
    height: 45rem; /* Set the height of the image */
    width: 45rem; /* Maintain the aspect ratio of the image */
    border-radius: 1rem; /* Rounded corners for the image */
    object-fit: cover; /* Cover the entire container with the image */
    transition: transform 0.3s ease-in-out; /* Smooth transition for the transform property */
  }
  
  .image-content img:hover {
      transform: translateX(-20px); /* Translate the image 20px to the left on hover */
  }
/* end about css */

/* products css */
.products .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1.5rem;
}
.products .box-container .box {
  text-align: center;
  padding: 2rem;
  border: 0.2rem solid rgba(0, 0, 0, 0.1);    
  margin-top: 5rem;
  border-radius: 1rem;
}
.products .box-container .box .image {
 padding-bottom: 2.5rem;
 margin-top: -6rem;
}
.products .box-container .box .image img {
  height: 25rem;
}
.box .image img {
  transition: transform 0.3s ease-in-out; /* Smooth transition for the transform property */
}

.box .image img:hover {
  transform: scale(1.1); /* Scale the image up by 10% on hover */
}
.products .box-container .box .content h3 {
  color: #222;
  font-size: 2.5rem;
} 
.products .box-container .box .content .stars {
  padding: 1.5rem;
}
.products .box-container .box .content .stars i {
  color: gold;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.products .box-container .box .content .price {
  font-size: 2.5rem;
  color: var(--color);
  margin-bottom: 0.5rem;
}
.products .box-container .box .content .price span {
  color: #222;
  text-decoration: line-through;
  font-weight: lighter;
 font-size: 1.5rem;
}
.products .box-container .box .icons a {
  height: 5rem;
  width: 5rem;
  line-height: 5rem;
  font-size: 2rem;
  border: 0.1rem solid var(--color);
  color: var(--color);
  margin: 0.3rem;
  border-radius: 0.5rem;
}
.products .box-container .box .icons a:hover {
  background: var(--color);
  color: #fff;
}
/* categories css */
.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.category {
  padding-top: 0.5rem;
 
}
.category .heading h2 {
  font-size: 2rem;
  color: #222;
}
.category-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, 38rem));
  justify-content: center;
  gap: 1rem;
}
.category-box {
  background: var(--white-color);
  border-radius: 2rem;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category-box img {
  height: 300px;
  width: 100%;
  object-fit: cover;
  border-radius: 1rem;
}
.category-box p {
  color: var(--main-color);
  font-size: 1.5rem;
}
.category-box h3 {
  margin-top: 1rem;
  font-size: 2.5rem;
  padding-bottom: 1rem;
  color: var(--main-color);
}
.category .card:hover {
  transform: translateY(-10px);
}
.category .card {
  border-radius: 2rem;
  transition: 0.5s;
  cursor: pointer;
}
/* end categories css */

/* coffee bas */
.base {
  height: 90vh;
  padding-bottom: 10rem;
  padding-top: 1rem;
}
.cooler {
  background: var(--white-color);
  border-radius: 1.5rem;
  padding-bottom: 5rem;
  width: 95%;
  margin-left: 4rem;
  margin-top: 5rem;
}
.base .box-container {
  display: flex;
  flex-direction: column; /* Arrange children in a column (2 rows) */
  align-items: center; /* Center align items horizontally */
  gap: 1rem; /* Add space between the rows */
}

.base .box-container .image,
.base .box-container .container {
  width: 100%; /* Ensure both rows take up the full width */
}

.base .box-container .image img {
  width: 100%; /* Ensure the image takes up the full width of its container */
  height: 10rem; /* Maintain the aspect ratio of the image */
  object-fit: cover; /* Cover the entire container with the image */
  border-radius: 1.5rem; /* Rounded corners for the image */
}
.base .box-container .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Create 2 equal columns */
  gap: 1rem; /* Add space between the columns */
}
.base .box-container .container .item {
  display: grid; /* Display the icon and content side by side */
  grid-template-columns: 20% 1fr; /* Create a 10% width column for the icon and a 90% width column for the content */
  gap: 1rem; /* Space between the icon and content */
  padding: 2rem; /* Add padding around the item */
  padding-left: 5rem;

}
.base .box-container .container .icon img {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for transform and box-shadow properties */
}
.base .box-container .container .item .content h3,
.base .box-container .container .item .content p {
  margin: 0; /* Remove default margin */
}
.base .box-container .container .item .content h3 {
  font-size: 2.2rem;
  color: var(--color);
}
.base .box-container .container .item .content p {
  font-size: 1.5rem;
  line-height: 1.6;
}
.base .container .icon img {
  width: 100%;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for transform and box-shadow properties */
}
.base .container .icon img:hover {
  transform: scale(1.1); /* Slightly scale up the image */
}
.base .container{
  padding-top: 2rem;
}
.about-content .content-wrapper .image img {
  width: 60%;
  object-fit: cover;
  border-radius: 1rem;
}
.content-wrapper {
  display: flex;
  align-items: flex-start; /* Align items at the start of the container */
  gap: .2rem; /* Space between the text and the image */
}
.location {
  display: flex;
  justify-content: center;
  align-items: center;
 
}

.map {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Ensure the map container takes up the full width */
}

/*=============== BUTTON ===============*/
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  background-color: var(--black-color);
  padding: 1.1rem 1.5rem;
  color: var(--white-color);
  font-weight: var(--font-medium);
  border-radius: 0.75rem;
  transition: background-color 0.4s;
}

.button i {
  font-size: 1.25rem;
}
/* contact css */
.contact .row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}
.contact .row form {
  padding: 2rem;
  border: .1rem solid rgba(0, 0, 0, 0.1);
  flex: 1 1 40rem;
  border-radius: 0.5rem;
}
.contact .row form h3 {
  font-size: 2.5rem;
  padding-bottom: 1rem;
  color: var(--color);
}
.contact .row form .inputBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.contact .row form .inputBox .input {
  width: 49%;
}
.contact .row form .inputBox .box,
.contact .row form textarea {
 padding: 1rem 1.2rem;
 font-size: 1.6rem;
 border: .1rem solid rgba(0, 0, 0, 0.1);
 color: #222;
 text-transform: none;
 margin: 0.7rem 0;
 border-radius: 0.5rem;
}
.contact .row form textarea {
  width: 100%;
  height: 15rem;
  resize: none;
}
.contact .row form .btn {
  background: none;
}
.contact .row form .btn:hover {
  background: var(--color);
}
.contact .row .map {
  flex: 1 1 40rem;
}

/* end contact css */

/* footer css */
.footer {
  color: #fff8f2;
  padding: 3rem 7%;
}
.footer .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  gap: 1.5rem;
}
.footer .box-container .box h3 {
  font-size: 2.2rem;
  color: #222;
 padding: 1rem 0;
}
.footer .box-container .box h3 i {
  color: var(--color);
}
.footer .box-container .box a {
  font-size: 1.4rem;
  color: var(--color);
  padding: 1rem 0;
  display: block;
}
.footer .box-container .box img {
 width: 90%;
 height: auto;
}
.footer .box-container .box a:hover {
  text-decoration: underline;
}
.footer .box-container .box a i {
 padding-right: 0.5rem;
}
.footer .box-container .box form input[type="email"] {
  width: 100%;
  padding: 1rem 1.2rem;
  font-size: 1.6rem;
  color: #222;
  margin: 1rem 0;
  border: 0.1rem solid var(--color);
  border-radius: 0.5rem;
  text-transform: none;
}
.footer .box-container .box form .btn {
background: none;
}
.footer .box-container .box form .btn:hover {
  background: var(--color);
  }
  .footer .box-container .box .payment {
  width: 100%;
  margin-top: 2rem;
}
.footer .box-container .box .email {
  text-transform: lowercase;
}
.footer .credit {
  text-align: center;
  color: #222;
  margin-top: 1rem;
  padding: 1rem;
  font-size: 1.2rem;
  padding-top: 2.5rem;
  border-top: 0.2rem solid rgba(0,0,0,0.1);
}
.footer .credit span {
  color: var(--color);
}
.footer .credit p {
  margin-bottom: 0.5rem;
}

/* end footer css */

/* media queries */
@media (max-width:991px) {
  html {
    font-size: 55%;
  }
  .header {
    padding: 2rem;
  }
  section {
    padding: 3rem;
  }
}
@media (max-width:768px) {
  #menu-btn {
    display: inline-block;
  }
  .header .navbar {
    position: absolute;
    top: 110%;
    right: -110%;
    width: 30rem;
    box-shadow: var(--box-shadow);
    background: #fff;
    border-radius: 0.5rem;
  }
  .header .navbar.active {
    right: 2rem;
    transition: 0.4s linear;
  }
  .header .navbar a {
    display: block;
   margin: 2rem 2.5rem;
   font-size: 2rem;
  }
  .home {
    background-position: left;
    justify-content: center;
  }
  .home .content h3{
    font-size: 4rem;
  }
  .home .home-image img {
    padding-top: 50rem;
  }
  .home .content {
    padding-bottom: 25rem;
    padding-right: 1rem;
}
}
@media (max-width:450px) {
  html {
    font-size: 50%;
  }
  .home .home-image img {
    padding-top: 60rem;
}
}