/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styling */
body {
  font-family: Arial, sans-serif;
  background-color: white;
  height: 100vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: left;
  text-align: left;
}

/* Header styles */
header {
  position: sticky; /* Makes the header fixed at the top */
  top: 0;
  left: 0;
  width: 100%;

  background-color: white; /* Ensure header background is white */
  z-index: 1000; /* Keeps header above other content */
  padding: 10px 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0); /* Subtle shadow for depth */
  text-align: left; /* Left-align logo and line */
}

/* Logo styles */
#logo {
  max-height: 65px; /* Adjust logo size */
  vertical-align: middle; /* Align the logo nicely with any text */
  margin-top: 20px; /* Add this line to move the logo slightly down */
}



/* Positioning and Styling for the Section */
.ptfe-valves-section {
  position: absolute;
  top: 50%;
  left:5%;
  transform: translateY(-50%);
  padding-left: 0px;
  width: 100%;
  padding-right: 20px;
}

/* Main Heading Styling */
.main-heading {
  font-size: 48px;
  font-weight: bold;
  color: rgb(85, 85, 85);
  width: 95%;
  padding-right: 20px;
}

/* Sub Heading Styling */
.sub-heading {
  font-size: 20px;
  color: #9A1360;
  margin-top: 10px;
  font-weight: bold;
}

/* Styling for Image */
.image-section {
  margin-top: 50px;
}

.image {
  max-width: 100%;
  height: auto;
  width: 100%;
}

/* Blinking animation for "Configurator" */
@keyframes blink {
  0% { color: #9A1360; }
  50% { color: transparent; }
  100% { color: #9A1360; }
}

.new-item {
  animation: blink 1s infinite;
  font-weight: bold;
  padding: 20px 0px;
}

/* Style for the dropdown heading */
.dropdown-heading {
  font-size: 16px;  /* Set font size */
  font-weight: bold;  /* Bold text for emphasis */
  background-color: #9A1360;
  color: white; /* Set the color of the heading */
  margin-bottom: 10px;  /* Space below the heading */
  padding: 10px 0px;  /* Padding for spacing */
  text-align: center;  /* Align text in the center */
  border-bottom: 1px solid #ddd; /* Optional: Border to separate heading */
  width: 290px;
  margin-left: -5px;
}

/* Style the dropdown list */
.dropdown {
  display: none; /* Hide dropdown by default */
  position: absolute;
  list-style-type: none;
  margin-top: 10px;
  margin-left: -80px;
  padding: 5px;
  border: none;
  z-index: 1000;
  min-width: 290px;
  max-width: 290px;
  height: 210px;
  opacity: 0; /* Start with invisible */
  transition: opacity 0.1s ease-in-out, transform 5s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  font-weight: bold;
 color: rgb(85, 85, 85);
}

/* Show the dropdown when hovering over the dropdown container */
.dropdown-container:hover .dropdown {
  display: block;
  opacity: 1; /* Make visible */
  transform: translateY(0); /* Move the dropdown back to its original position */
}

/* Icon-text container: align image and text */
.icon-text {
  display: flex;        /* Arrange items in a row */
  align-items: center;  /* Vertically align image and text */
  padding: 5px;         /* Adjust padding between icon and text */
}

/* Image styling */
.icon-text img {
  margin-right: -15px;    /* Adjust the space between image and text */
  width: 40px;          /* Adjust the icon size if needed */
  height: 40px;         /* Adjust the icon size if needed */
  margin-top: -10px;
}

/* Dropdown item styling */
.dropdown-item {
  padding: 10px;
  text-decoration: none;
  color: rgb(85, 85, 85);
  display: block;
   font-size: 14px;
   margin-top: -10px;
   white-space: nowrap;
}

/* Hover effect for dropdown items */
.dropdown-item:hover {
  color: #9A1360; /* Highlight color for the text */
  
}