/* Reset and General Styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* General text styles */
.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.courgette-regular {
  font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
}

/* Hero Section */
#hero {
  background-image: url(../assets/breakfast-cereal-7337357_1280.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.text {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: white;
  position: relative;
  max-width: 800px;
  padding: 20px;
  z-index: 1;
  text-align: center;
  width: 90%;
}

.text h1 {
  font-size: 2.5em;
  margin: 20px 0;
}

.text p {
  font-size: 18px;
  margin-bottom: 20px;
}

#discover-button {
  background-color: #487A3A;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  height: 51px;
  letter-spacing: 2px;
  border: 0;
  width: 200px;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

#discover-button:hover {
  box-shadow: 0 0 10px 5px rgba(153, 101, 21, 0.8);
  transform: scale(1.1);
}

#discover-button a {
  text-decoration: none;
  color: white;
}

/* Navbar */
#hero-top {
  background-color: #2E0000;
  color: white;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 300px;
  padding: 15px 30px;
}

.vertical-line {
  width: 1px;
  height: 100%;
  background-color: #573333;
  margin: 0 auto;
}

#nav-bar {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
}

#nav-bar img {
  max-width: 250px;
  height: 65px;
}

#nav-links span a {
  margin-right: 20px;
  text-decoration: none;
  color: #2D0000;
}

/* Social Icons */
#social-icons a {
  margin-left: 20px;
  color: white;
  transition: transform 0.3s ease-in-out;
}

#social-icons a:hover {
  transform: rotateY(180deg);
}

/* About Section */
#about {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 100px;
  background-color: #EFEFEF;
  width: 100%;
  column-gap: 100px;
  min-height: 400px;
}

#about h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #333;
}

#about-us {
  max-width: 600px;
}

#about-image {
  width: 100%;
  max-height: 367px;
  max-width: 367px;
  border-radius: 15px;
  transition: transform 0.6s ease;
  position: relative;
  z-index: 1;
}

#about-image:hover {
  transform: scale(1.1);
}

#about-title {
  color: rgb(38, 50, 70);
  font-family: "DM Sans", sans-serif;
  font-size: 30px;
  font-weight: 400;
}

#about-description {
  color: rgb(110, 117, 128);
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

/* Products Section */
#products {
  background-color: white;
  width: 100%;
  padding-top: 50px;
  /* margin-bottom: 50px; */
}

#sub-header {
  display: flex;
  justify-content: center;
  margin-bottom: 35px;
}

#sub-header h2 {
  font-size: 1.8rem;
  color: #333;
}

#product {
  background-color: #F8F8F8;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  padding: 20px;
  flex-wrap: wrap;
}

.productdiv {
  text-align: center;
  width: 300px;
  height: auto;
  border-radius: 5px;
  padding: 20px;
  background-color: white;
}

.productdiv img {
  width: 200px;
  height: auto;
  border-radius: 5px;
}

.producttext p {
  margin-top: 10px;
}

#reviews {
  /* height: 80vh; */
  width: 100vw;
  background-color: #F5F6FA;
  /* text-align: center; */
}

/* Swiper Styles */
.swiper {
  width: 95%;
  /* height: 100%; */
  height: 600px;
}
.swiper-slide {
  background: #F5F6FA;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
}
.swiper-slide i {
  color: #2E0000;
}
.images-one {
  display: block;
  object-fit: cover;
  border-radius: 50%;
  max-width: 65%;
  height: 120px;
  margin: 0 auto;
}
.review-text {
  color: rgb(38, 50, 70);
font-family: "DM Sans", sans-serif;
font-size: 36px;
font-weight: 400;
/* height: 144px; */
/* line-height: 48px; */
text-align: center;
align-items: center;
max-width: 65%;
  margin: 0 auto; 
}
.magin-para {
  color: rgb(38, 50, 70);
font-family: "DM Sans", sans-serif;
font-size: 20px;
font-weight: 700;
}
/* Styling the Swiper navigation buttons */
.swiper-button-next, .swiper-button-prev {
  color: #2E0000 !important; /* Set the arrow color */
  font-weight: bold;
}

/* Change color on hover */
.swiper-button-next:hover, .swiper-button-prev:hover {
  color: #FF5733 !important; /* Change color on hover */
}

/* Ensure Swiper arrow icons inside buttons are styled correctly */
.swiper-button-next::after, .swiper-button-prev::after {
  color: #2E0000 !important; /* Force color for the arrow icons */
  font-weight: bold;
}

/* Hover effect for arrows */
.swiper-button-next:hover::after, .swiper-button-prev:hover::after {
  color: #FF5733 !important; /* Force hover color for the arrow icons */
}
.swiper-pagination-bullet {
  background-color: #2E0000 !important; /* Default dot color */
  opacity: 0.8;
}

.swiper-pagination-bullet-active {
  background-color: #2E0000 !important; /* Active dot color */
}

#contact {
  display: flex; /* Makes the section a flex container */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Aligns content vertically */
  background-color: #2E0000; /* Background color */
  color: #fff; /* Text color */
  padding: 20px; /* Adds padding around the section */
   /* Adds space at the bottom to avoid overlap on mobile */
}

/* Ensures the content is centered and laid out horizontally */
#contact span {
  display: flex; /* Aligns items in a row */
  justify-content: center; /* Centers the items horizontally */
  align-items: center; /* Aligns icons and text vertically */
  gap: 15px; /* Space between each icon-text pair */
  font-size: 16px; /* Adjusts font size */
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

/* Icon Styles */
#contact i {
  font-size: 20px; /* Icon size */
  color: #487A3A; /* Icon color */
  margin-right: 8px; /* Adjust the space between icon and text */
  vertical-align: middle; /* Ensures icons align with the text */
}

/* Text Styles for Paragraphs */
#contact p {
  margin: 0; /* Removes default margin */
  font-size: 18px; /* Text size */
  font-weight: bold; /* Makes the heading bold */
  text-align: center; /* Centers the text */
  margin-bottom: 0; /* No margin below the paragraph */
  display: inline-block; /* Ensures paragraph stays inline with icons */
  vertical-align: middle; /* Aligns text vertically with icons */
}


/* Footer */
footer {
  text-align: center;
  padding: 10px;
  background-color: #2E0000;
  color: #fff;
}

/* Responsive Design */

/* Small devices (mobile phones) */
@media (max-width: 576px) {
  body {
    font-size: 12px;
  }

  #hero {
    height: 60vh;
  }

  .text h1 {
    font-size: 1.8em;
  }

  .text p {
    font-size: 14px;
  }

  #discover-button {
    width: 150px;
  }

  #hero-top {
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
  }

  #nav-bar {
    flex-direction: column;
    align-items: center;
  }

  #nav-links span a {
    margin-right: 10px;
    font-size: 12px;
  }

  #about {
    padding: 20px;
    flex-direction: column;
    text-align: center;
  }

  #about-image {
    margin-bottom: 20px;
  }

  #product {
    flex-direction: column;
    gap: 20px;
  }

  .productdiv {
    width: 80%;
    height: auto;
  }

  .productdiv img {
    width: 150px;
    height: 150px;
  }

  .producttext p {
    font-size: 14px;
  }
  .swiper {
    height: 300px; /* Further reduce height for small devices */
  }

  .review-text {
    font-size: 18px; /* Smaller text size for readability */
    max-width: 90%; /* Further reduce text width */
  }

  .images-one {
    height: 50px; /* Smaller image size */
    max-width: 40%; /* Adjust image width */
  }

  /* .swiper-button-next, .swiper-button-prev { */
    /* display: none; Hide navigation buttons for very small screens */
  /* } */
  #contact {
    padding: 10px; /* Reduces padding for smaller screens */
  /* Adjusts bottom margin */
  }

  #contact span {
    flex-direction: column; /* Stacks items vertically on mobile */
    gap: 10px; /* Reduces gap between items */
    text-align: center; /* Centers text */
  }

  #contact i {
    font-size: 18px; /* Smaller icons on mobile */
    margin-right: 5px; /* Reduces margin between icons and text */
  }

  #contact p {
    font-size: 16px; /* Smaller text size on mobile */
  }
}

/* Medium devices (tablets) */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  #hero {
    height: 75vh;
  }

  #about {
    flex-direction: column;
    text-align: center;
  }

  #product {
    flex-wrap: wrap;
    gap: 20px;
  }
  .swiper {
    height: 400px; /* Adjust the height */
  }

  .review-text {
    font-size: 24px; /* Smaller font size for reviews */
    max-width: 80%; /* Reduce text width */
  }

  .images-one {
    height: 80px; /* Smaller image size */
    max-width: 50%;
  }
}