* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

h1 {
  color: #02082c;
}

.container {
  width: 85%;
  margin: 0 auto;
}

.header {
  width: 100%;
  background-color: #02082c;
  color: white;
  /* flexbox */
  display: flex;
  align-items: center;
  padding: 20px 100px;
  position: relative;
}

.company-logo {
  margin-right: 20px;
  /* Adjust margin as needed */
}

.header ul {
  list-style: none;
  display: flex;
}

.header ul li {
  /* TOP/BOTTOM LEFT/RIGHT */
  margin: 0 10px;
}

.header ul li a {
  text-decoration: none;
  color: white;
  font-weight: 600;
  font-size: 18px;
}

/* Additional CSS styles */
.company-name {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 2px;
  /* Adjust this value to reduce the gap */
}

.tagline {
  font-size: 16px;
  white-space: nowrap;
  margin-top: -20px;
  /* Adjust this value to reduce the gap */
}

.header-links {
  margin-left: 250px;
  /* Pushes the links to the left */
}

/* Change color on hover */
.header-links ul li a:hover {
  color: #4fb6ea;

  /* Change to your desired color */
}


@keyframes flicker {
  0% {
    opacity: 1;
    color: white;
    /* Set text color to white */
    background-color: #036596;
    /* Set background color to blue */
    font-weight: bold;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
    color: white;
    /* Set text color to white */
    background-color: #050f43;
    /* Set background color to blue */
    font-weight: bold;
  }
}

.flicker-animation {
  animation: flicker 3s infinite;
}


.header-buttons {
  margin-left: auto;
  /* Pushes the buttons to the right */
}

.header-buttons button {
  background-color: #BAE6FB;
  color: black;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
}

.header-buttons button:hover {
  background-color: #4fb6ea;
}


.hero {
  padding-top: 30px;
  background-color: #aedcf3;
}

.hero .container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.hero-desc {
  width: 40%;
}

.hero-desc>* {
  color: #02082c;
}

.hero-desc h1 {
  font-size: 38px;
}

.hero-desc p {
  font-size: 18px;
  margin: 10px 0;
}

.hero-desc a {
  display: inline-block;
  text-decoration: none;
  background-color: #02082c;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 24px;
}


.how-it-works {
  background-color: #aedcf3;
  padding-bottom: 50px;
}

.how-it-works .container {
  background-color: #fff;
  padding: 50px 20px;
  text-align: center;
  border-radius: 15px;
}

.how-it-works a {
  text-decoration: none;
  color: white;
  background-color: #02082c;
  padding: 10px 20px;
  border-radius: 3px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 30px 0;
}

.card {
  background-color: #02082c;
  color: white;
  padding: 40px 20px;
  margin: 0 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  /* Adjust the distance it moves up */
}

.card:not(:hover) {
  transition: transform 0.3s ease;
}

/* Define the animation */
@keyframes shake {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(5px);
  }

  75% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}



.navigation {
  display: flex;
  justify-content: flex-end;
  /* Align items to the right */
  align-items: center;
}

.navigation .prev,
.navigation .next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  /* Adjust as needed */
  height: 40px;
  /* Adjust as needed */
  border-radius: 50%;
  background-color: #ddd;
  /* Adjust background color */
  color: #333;
  /* Adjust arrow color */
  font-size: 24px;
  /* Adjust arrow size */
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 10px;
  /* Add margin between the two arrows */
}

.navigation .prev:hover,
.navigation .next:hover {
  background-color: #aaa;
  /* Adjust hover background color */
}




/* Apply the animation to the img elements inside the .card class */
.card:hover img {
  animation: shake 0.6s ease-in-out 1 alternate;
  /* Adjust duration and iteration count as needed */
}

.navigation-container {
  text-align: center;
}

.card h1 {
  color: white;
}

.card i {
  font-size: 45px;
  text-align: center;
}

.card>* {
  margin: 5px 0;
}

.main-spacing {
  /* Top/bottom ---- Left/Right */
  padding: 50px 0;
}

.why h1,
.why p {
  text-align: center;
}

.row-spacing {
  width: 65%;
  margin: 0 auto;
}

/* General CSS reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Shops section styles */



.arrow-circle {
  display: inline-block;
  width: 40px;
  /* Adjust as needed */
  height: 40px;
  /* Adjust as needed */
  border-radius: 50%;
  background-color: #dfdddd;
  /* Circle background color */
  text-align: center;
  line-height: 40px;
  margin: 0 5px;
  /* Adjust the spacing between arrows */
  transition: transform 0.3s ease;
}

.arrow-circle:hover {
  transform: translateY(5px);
  /* Adjust the distance it moves down */
}

.arrow-circle a {
  display: inline-block;
  color: #333;
  /* Default arrow color */
  font-size: 20px;
}

.arrow-circle:hover a {
  color: #857676;
  /* Change arrow color on hover */
}



.shops {
  padding: 50px 0;
}

.shops .container {
  text-align: center;
}

.shops h1 {
  color: black;
}

.shops .row {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  /* Ensure all items stretch to the same height */
  flex-wrap: wrap;
}

.shops .shop {
  width: calc(30% - 20px);
  /* 30% width with some space for margin */
  margin: 15px;
  /* Adjust margin as needed */
  padding: 20px;
  /* Padding for inner content */
  background-color: white;
  /* Background color */
  border: 2px solid black;
  /* Black border */
  border-radius: 10px;
  /* Rounded corners */
  transition: box-shadow 0.3s ease;
  /* Smooth transition for shadow */
  display: none;
  position: relative;
  flex-direction: column;
  /* Stack image and text vertically */
  height: 357px;
  /* Set the desired height */
}


/* Specific style for the "Drops" shop */
.shops .shop.drops {
  /* Add specific styles for the "Drops" shop here */
  background-color: #ffd700;
  /* Yellow background color for the "Drops" shop */
}

.shops .shop img {
  width: 100%;
  /* Ensure the image fills its container */
  height: 200px;
  /* Set a fixed height for all images */
  object-fit: cover;
  /* Maintain aspect ratio and cover the container */
}

.shops .shop:hover {
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.4);
  /* Increased shadow intensity on hover */
}

.shops .shop p {
  color: black;
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
  /* Center the text */
  flex-grow: 1;
  /* Allow the paragraph to grow to fill the available space */
}


/* Style for shop image */
.shop img {
  width: 100%;
  height: auto;
}

/* Style for shop name */
.shop h2 {
  position: absolute;
  bottom: 10px;
  left: 10px;
  margin: 0;
  color: #fff;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
}

/* Style for shop information */
.shop-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
}

/* Style for ratings */
.shop-info .ratings {
  font-size: 15px;
  color: white;
}

/* Style for services */
.shop-info .services {
  font-size: 15px;
  color: white;
}

.shop-content {
  text-align: left;
}

.shop-info {
  margin-top: 10px;
}

.ratings,
.services {
  margin-top: 5px;
  font-size: 14px;
}

.shop-info .services i {
  margin-right: 5px;
}

/* Style for location */
.shop-info .location {
  color: white;
  font-size: 15px;
  /* Adjust the font size as needed */
  margin-top: 5px;
  /* Add some spacing */
}

/* Style for location icon */
.shop-info .location i {
  margin-left: 4px;
  /* Add some spacing between the icon and text */
  color: white;
  /* Set the color of the icon to white */
}





/* CSS for popup */

#drops-popup {
  /* Position the popup below the "drops" box */
  position: absolute;
  top: 100%;
  /* Position it just below the "drops" box */
  left: 20px;
  /* Align the left edge of the popup with the left edge of the "drops" box */
  margin-top: 435px;
  /* Add some space between the "drops" box and the popup */
}

.popup {
  position: absolute;
  display: none;
  /* Additional styling for the popups */
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1;
  /* Ensure the popups appear above other elements */
}

/* Positioning the popups */
#tumbledry-popup {
  top: 100%;
  /* Position it just below the "drops" box */
  left: 500px;
  /* Align the left edge of the popup with the left edge of the "drops" box */
  margin-top: 435px;
}

#fabrico-popup {
  top: 100%;
  /* Position it just below the "drops" box */
  left: 850px;
  /* Align the left edge of the popup with the left edge of the "drops" box */
  margin-top: 435px;
}





.popup h2 {
  margin-top: 0;
}

/* CSS for shops */
.shop {
  cursor: pointer;
}

.details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}


.close {
  font-size: 50px;
  /* Adjust the size as needed */
}



.contact {
  color: white;
  background-color: #4fb6ea;
}

.contact h1 {
  color: white;
  text-align: center;
}

.contact form {
  width: 40%;
  /* center a div */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  /* border-width border-type border-color */
  border: 2px solid white;
  padding: 40px;
  border-radius: 15px;
}

.contact form input {
  background-color: transparent;
  border: 2px solid white;
  margin: 10px 0;
  color: white;
  font-size: 18px;
  padding: 5px 10px;
  border-radius: 15px;
  outline: 0;
}

.contact form input::placeholder {
  color: whitesmoke;
}

.contact form input[type="submit"] {
  background-color: #02082c;
  color: white;
  border: 0;
  cursor: pointer;
}

.contact form input[type="submit"]:hover {
  background-color: #16079b;
  /* Change the background color on hover */
}

.additional-notes {
  background-color: transparent;
  /* Set background color to the same blue */
  border: 2px solid white;
  /* Add border to match the styling */
  color: white;
  /* Set text color */
  padding: 10px;
  /* Add padding for better readability */
  border-radius: 15px;
  /* Add border-radius for rounded corners */
  resize: vertical;
  /* Allow vertical resizing */
  min-height: 100px;
  /* Set minimum height to prevent collapsing */
}

.additional-notes::placeholder {
  color: white;
  /* Set placeholder text color */
}

/* Footer Styles */
footer {
  background-color: #02082c;
  color: white;
  padding: 20px;
}

.footer-left,
.footer-right {
  flex: 1;
}

.footer-center {
  flex: 2;
  text-align: center;
}

.footer-center ul {
  list-style-type: none;
  padding: 0;
}

.footer-center ul li {
  display: inline-block;
  margin-right: 20px;
}

.footer-center ul li:last-child {
  margin-right: 0;
}

/* Link Styles */
.footer-center ul li a {
  color: white;
  text-decoration: none;
}

.footer-center ul li a:hover {
  text-decoration: underline;
}