/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  color: #333;
  overflow-x: hidden;
  touch-action: manipulation;
  overscroll-behavior: none;
  transform: scale(1);
  transform-origin: top left;
  font-size: 1rem;
}

html, body {
  width: 100%;      /* Ensures the body takes the full width of the viewport */
  max-width: 1960px; /* Maximum width of the webpage */
  min-width: 1900px;
  margin: 0 auto;   /* Centers the content horizontally */
  /*overflow-x: hidden; /* Prevents horizontal scroll if content exceeds width */
}

/* Header styles */
header {
  position: sticky; /* Makes the header fixed at the top */
  top: 0;
  left: 0;
  width: 100%;
  height:50px;
  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.1); /* Subtle shadow for depth */
  text-align: left; /* Left-align logo and line */
}

/* Logo styles */
#logo {
  max-height: 50px; /* Adjust logo size */
  vertical-align: middle; /* Align the logo nicely with any text */
}

/* Horizontal line under the header */
header hr {
  border: 1px solid white; /* Match the Pink theme */
  margin-top: 10px;
  width: 100%; /* Set width to prevent it from stretching across the whole screen */
  max-width: 2000px; /* Limit the width of the line */
   margin-top: 40px;
   opacity:0;
}

nav {
  margin-top: -30px; /* Move the navigation slightly up */
  letter-spacing: 1px;
  font-family: 'Arial'; 
  
}

nav ul {
  list-style-type: none; /* Removes default bullet points */
  padding: 0;
  margin: 0;
  display: flex; /* Aligns items in a row */
  justify-content: center; /* Centers the items horizontally */
}

nav ul li {
  margin: 0 15px; /* Adds spacing between the items */
}

nav ul li a {
  text-decoration: none; /* Removes underline from links */
  color: #000; /* Set text color */
  font-size: 16px; /* Set font size */
}

/* 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: 300px;
  margin-left: -5px;
}

.dropdown {
  display: none; /* Hide dropdown by default */
  position: absolute;
  list-style-type: none;
  background-color: white;
  margin-top: 10px;
  margin-left: -80px;
  padding: 5px;
  border: none;
  z-index: 1500;
  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: -20px;    /* 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 */
  
}

/* 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;
}



/* Ensure the viewer container is styled */
.viewer-container {
  width: 600px;
  height: 600px;
  margin: 10px auto; /* Center the container horizontally */
  border: 1px solid #ccc;
  position: absolute; /* Fix it in place, but use centering */
  top: 180px; /* Space from the top */
  left: 48.15%; /* Start from the center */
  transform: translateX(-50%); /* Move it left by 50% of its width to truly center it */
z-index: 0;

}

#3d-viewer {
  width: 100%;
  height: 100%;
  background-color: white;
 z-index: 1;
}

/* Options Column Positioned at the Top-Left */
.options-column {
  position: absolute;     /* Position the container absolutely */
  top: 190px;              /* Distance from the top of the screen */
  left: 10px;             /* Distance from the left of the screen */
  padding: 12px;          /* Padding for content inside */
  background-color: #fff; /* White background */
  border: 1px solid #ddd; /* Subtle border */
  border-radius: 8px;     /* Rounded corners for aesthetics */
  max-width: 560px;       /* Limit width to prevent overflow */
  min-width: 560px;
  max-height: 665px;
  overflow-y: auto;       /* Enable scrolling if content exceeds height */
  z-index: 1000;          /* Ensure the column stays above other elements */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

/* Button Styling */
.option-container button {
  width: 160px;           /* Fixed width for buttons */
  height: 10px;           /* Fixed height for buttons */
  min-height: 35px;  
  text-align: center;     /* Center text inside the button */
  border: 1px solid #ccc; /* Subtle border */
  border-radius: 5px;     /* Rounded corners */
  background-color: #f9f9f9; /* Light background color */
  color: #333;            /* Text color */
  cursor: pointer;        /* Pointer cursor for interactivity */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for better look */
  font-size: 14px;        /* Standard font size */
  transition: all 0.3s ease; /* Smooth hover effect */
  margin-bottom: 2px;    /* Space between rows of buttons */
  
}

/* Button Hover Effect */
.option-container button:hover {
  background-color:  #555555; /* Lighter Pink when hovereda020f0 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.option-button:focus {
  outline: none;
  box-shadow: 0 0 3px 3px rgba(50, 50, 50, 0.5);
}

/* Section Titles */
.options-column h3 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 30px; /* Corrected from 30x to 30px */
  color: #444;
  Padding: 20px;
}


/* Option Container */
.option-container {
  display: flex;
  flex-wrap: wrap;       /* Wrap buttons to the next line */
  gap: 7px;             /* Even spacing between buttons */
  justify-content: flex-start; /* Align buttons to the left */
  
}






#valvesize button {
  max-width: 11%;        /* Ensure the container is responsive */
  
}



/* Option Button Styling */
.option-button {
  background-color: #fff;
  border: 1px solid #9A1360;
  color: #9A1360;
  padding: 5px 20px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

/* Option Button Hover Effect */
.option-button:hover {
  background-color: #555555;
  color: white;
}

/* Active (Selected) Option Styling */
.option-button.selected {
  background-color: #9A1360;
  color: white;
}

/* View2D buttons and containers */
.View2D-container {
  position: absolute; /* Fixed position relative to the browser window */
  display: flex;
  flex-direction: row; /* Change to row to align buttons horizontally */
  gap: 10px; /* Add some space between the buttons */
  padding: 10px;	
  border-radius: 8px;
  margin-top: 10px auto; /* Spacing between the buttons */
  gap: 10px;
  left:48.15%; /* Start from the center */
  top: 810px;
  transform: translateX(-50%);  
}


.View2D-button {
  background-color: #9A1360; /* Pink background */
  color: white; /* White text */
  font-size: 14px; /* Smaller font size */
  padding: 10px 20px; /* Adjust padding for smaller button */
  border: none;
  cursor: pointer;
  border-radius: 5px; /* Rounded corners */
    font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  font-family: 'Arial', sans-serif; /* Stylish font */
  text-transform: uppercase;
}
.View2D-button:focus {
  outline: none;
  box-shadow: 0 0 3px 3px rgba(50, 50, 50, 0.5);
}
.View2D-button:hover {
  background-color:  #555555; /* Lighter Pink when hovereda020f0 */
  border-color: #ffb6c1; /* Brightened border color */
}

/* Reset Button Styles */
.action-button {
  height: 40px;                         /* Set a fixed height */
  padding: 5px 20px;                      /* Horizontal padding */
  background-color: #9A1360;            /* Button background color */
  color: white;                         /* Text color */
  border: none;                         /* Remove border */
  cursor: pointer;                      /* Show pointer cursor on hover */
  border-radius: 5px;                   /* Rounded corners */
  white-space: nowrap;                  /* Prevent text wrapping */
  display: inline-flex ;                       /* Use flexbox for proper alignment */
  justify-content: center;              /* Center the content horizontally */
  align-items: center;                  /* Center the content vertically */
  box-sizing: border-box;               /* Include padding in total height calculation */
  transition: background-color 0.3s, color 0.3s;
margin-top: -110px;

}
.reset-button:hover, .action-button:hover {
  background-color: #555555;           /* Darker background on hover */
}	
.reset-button:active, .action-button:active {
  background-color: #8e1956;           /* Active state background */
}

.reset-button {
  height: 35px;                         /* Set a fixed height */
  padding: 5px 20px;                    /* Horizontal padding */
  background-color: #9A1360;            /* Button background color */
  color: white;                         /* Text color */
  border: none;                         /* Remove border */
  cursor: pointer;                      /* Show pointer cursor on hover */
  border-radius: 5px;                   /* Rounded corners */
  white-space: nowrap;                  /* Prevent text wrapping */
  display: inline-flex;                 /* Use flexbox for proper alignment */
  justify-content: center;              /* Center the content horizontally */
  align-items: center;                  /* Center the content vertically */
  box-sizing: border-box;               /* Include padding in total height calculation */
  transition: background-color 0.3s, color 0.3s;
  margin-top: -108.5px;                     /* Move the button slightly upwards */  
   margin-left: 11px;

  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1.25px;
  font-family: 'Arial', sans-serif; /* Stylish font */


  border-radius: 30px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow to create depth */


}


/* Container for the right side buttons */
.right-buttons-container {
  position: absolute; /* Fixed position relative to the browser window */
  top: 240px; /* Distance from the top */
  right: 10px; /* Distance from the right */
  display: flex;
  flex-direction: row; /* Change to row to align buttons horizontally */
  gap: 5px; /* Add some space between the buttons */
  padding: 1px;
  border-radius: 8px;
  width: 660px; /* Auto width based on content */

}

/* Style for the file selection section */
.file-selection {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Label for the file selection dropdown */
.file-selection label {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

/* Dropdown selection style */
.option-select {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

/* Style for the action buttons */
.action-button {
  font-size: 14px;
  color: #fff;
  background-color: #9A1360;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 47px;
  margin-left: 10px;
  min-width: 120px;
height: 34px;


}

/* Hover effect for the buttons */
.action-button:hover {
  background-color: #555555;
}

/* Focus effect for the buttons */
.action-button:focus {
  outline: none;
  box-shadow: 0 0 3px 3px rgba(50, 50, 50, 0.5);
}


.option-button:disabled {
  background-color: #d3d3d3;  /* Light grey background */
  color: #a9a9a9;            /* Darker grey text */
  cursor: not-allowed;       /* Change cursor to indicate the button is disabled */
  text-decoration: line-through; /* Strike-through text */
}


/* Footer Styling */
footer {
  text-align: center;
  padding: 1px 0;
  background-color: #9A1360;
  color: white;
  display: flex;
  justify-content: space-evenly; /* Align items to the edges */
  align-items: center;
  flex-direction: row;  /* To adjust the order of items */
  margin-top: 600px;	
  min-height: 50px; /* Ensure the footer has a minimum height */
  font-style: bold;
}

/* Footer Left and Right Alignments */
.left-footer {
  padding-left: 2%;
}

.right-footer {
  padding-right: 2%;
}

/* Make the entire footer bold */
footer p {
  font-weight: bold;
}

/* Optional: Make the highlighted text bold as well */
footer .highlight {
  font-weight: bold;
}


/* Styling for highlighted text */
.highlight {
  color: #ff5733;                  /* Set text color to red */
  font-weight: bold;            /* Optionally, make the highlighted text bold */
}
/* Main content styles */
main {
  margin-top: 80px; /* Push the content below the fixed header */
  padding: 20px;
}

/* Container for the Butterfly Valve button */
.valve-container,
.left-container {
  display: flex;
  justify-content: center; /* Centers the button horizontally */
  margin-top: 115px; /* Push button below the header */  
  overscroll-behavior: none;
  text-align: center;
  
}

/* Container for the Reset Configurator button */
.reset-container {
  display: flex;
  justify-content: left; /* Align the button to the left */
  overscroll-behavior: none;
}
.wrapper {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  /* height: 100vh; /* Full viewport height */
  margin: 0; /* Remove any default margin */
}
/* Style for the "Butterfly Valve" button */
.valve-button {
  background-color: #9A1360; /* Pink background */
  color: white; /* White text */
  font-size: 22px;
  padding: 10px 100vw;
  border: none;
  font-family: 'Arial', sans-serif;
  cursor: auto;
  border-radius: 5px; /* Rounded corners */
  display: inline-block;
  line-height: 1.2; 
  margin-top: -120px; 
  width: 100%;
  height:70px;
  align-items: center;
}

.valve-button .title {
  font-size: 1.5rem;
  font-weight: bold;
  display: inline-block;
  margin-right: 5px; /* Space between title and subtitle */
  white-space: nowrap;
  width: 100%;
  justify-content: center;
}

.valve-button .subtitle {
  font-size: 1rem;
  color: white;
  display: inline-block;
  white-space: nowrap;
  justify-content: center;
}

/* Section Spacing */
.section-spacing {
  margin-top: 5px;
}

/* Form Container */
.form-container {
  margin-top: 20px;
  padding: 0 20px;
  min-height: 750px;
  transition: height 0.3s ease; /* Smooth transitions */
}

/* Label Styling */
label {
  font-size: 15px;
  display: block;
  margin: 15px 0 8px;
}

/* Required Asterisk Styling */
.required {
  color: red;
}


/* Style for the right-content section */
.right-content {
  position: absolute; /* Position the content absolutely on the page */
  top: 150px; /* Space from the top (adjust as needed) */
  right: 10px; /* 20px gap from the right edge */
  width: 620px; /* Adjust width automatically */
  height: 30px;
  padding: 20px;
  background-color: #f9f9f9; /* Light background color */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  display: flex; /* Flexbox for the icon and text */
  align-items: center; /* Center items vertically */
  justify-content: flex-start; /* Align items to the left */
  
}

/* Style for the icon-text container */
.icon1-text {
  display: flex;
  align-items: center; /* Align icon and text vertically */
  gap: 20px; /* Space between the 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;
}
/* Style for the icon image */
.icon {
  width: 45px; /* Fixed width for the icon */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensure the icon scales properly */
}

/* Style for the text paragraph */
.text {
  font-size: 14px; /* Adjust font size */
  color: #333; /* Dark text for readability */
  line-height: 1.5; /* Add space between lines */
  margin: 0; /* Remove default margin from the paragraph */
}

/* Style for the strong text (heading) inside the paragraph */
.text strong {
  color: #9A1360; /* Highlight the brand name in the pink color */
  font-size: 16px; /* Slightly larger font for emphasis */
}

.part-number-container {
  position: relative;
  text-align: center; /* Center the text */
  font-size: 0.9em;
  margin-bottom: 2px;
  color: #333;
  top: -56px;
  left: 32.25%;
  width: 100%;
  display: flex; /* Flexbox to keep items in a single line */
  justify-content: center; /* Center the items horizontally */
  align-items: center; /* Vertically align items */
  padding: 5px 0;
  width: 600px; 

}

.part-number-heading { 
  font-size: 1.2em; 
  font-weight: bold; 
  color: #333; 
  margin-right: 10px; 
max-width: 45px:
}

#part-number {
  font-weight: bold;
  color: #9A1360;
  font-size: 1.5em;
  padding: 5px 0;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  min-height: 20px;
}





/* Style for each code box */
.code-box {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f0f0;
  font-weight: bold;
  text-align: center;
}

/* Style for greyed-out boxes */
.greyed-box {
  background-color: #e0e0e0;
  color: #888;
  font-style: italic;
}



/* Adjust the view buttons container */
.view-button-container {
  position: absolute;
  top: 200px; /* Slightly move it down to avoid overlap with the top of the viewer */
  left: 63.5%; /* Adjust horizontally if necessary */
  z-index: 2; /* Make sure the buttons appear above the viewer */
  display: flex;
  flex-direction: column; /* Align icons vertically */
  gap: 10px; /* Space between the icons */
  transform: translateX(-50%);  

}

.view-button-container button {
  width: 40px; /* Set the width of the buttons to match the icon size */
  height: 40px; /* Ensure icons are clickable */
  background-color: rgba(0, 0, 0, 0.7); /* Optional: background for visibility */
  border: none;
  border-radius: 5px; /* Optional: round corners for the button */
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-button-container button:hover {
  background-color: #555555; /* Highlight the button on hover */
}

/* background-image: url('assets/front.png');
/* Front view button */
#frontView {   

  width: 40px;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: bold;
  color: #fff; /* White text color */
  background:  #9A1360; /*#9A1360; /* Gradient from #9A1360 to a complementary pink */
  padding: 10px 20px;
  border-radius: 30px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow to create depth */
  text-transform: uppercase;
  letter-spacing: 1.5px;
 /* animation: slideIn 0.5s ease-out; /* Animation for sliding effect */
  font-family: 'Arial', sans-serif; /* Stylish font */
  white-space: nowrap;
cursor: pointer;

}
.tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 18%; /* Position the tooltip above the button */
  left: -200%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-style: Italic;
}

#frontView:hover + .tooltip {
  visibility: visible;
  opacity: 0.5;
}
#frontView:hover {
  background-color: #555555; /* Highlight the button on hover */
}


/* Top view button */
#topView {
    background-image: url('assets/top.png');
	width: 40px;
	border: none;
}

/* Right view button */
#rightView {
    background-image: url('assets/right.png');
	width: 40px;
	border: none;
}

/* Left view button */
#leftView {
    background-image: url('assets/left.png');
	width: 40px;
	border: none;
}

/* Bottom view button */
#bottomView {
    background-image: url('assets/bottom.png');
	width: 40px;
	border: none;
}

/* Back view button */
#backView {
    background-image: url('assets/back.png');
	width: 40px;
	border: none;
}

#isoView {
    background-image: url('assets/iso.png'); /* Added background image for iso view */
		width: 40px;
	border: none;
}
/* Style for the right-content section */
.features-container {
  position: absolute; /* Position the content absolutely on the page */
  top: 150px; /* Space from the top (adjust as needed) */
  right: 70px; /* 10px gap from the right edge */
  width: 653px; /* Adjust the width of the container */
  padding: 10px; /* Reduced padding in the container */
  background-color: #f9f9f9; /* Light background color */
  border-radius: 8px; /* Rounded corners */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth (removed) */
  display: flex;
  flex-direction: column; /* Stack the feature blocks vertically */
  gap: 5px; /* Reduced space between the feature blocks */
}

/* Style for the technical specifications section */
.technical-specifications-container {
  position: absolute; /* Position the content absolutely on the page */
  top: 330px; /* Adjust space from the top (below Design Features section) */
  right: 5px; /* 10px gap from the right edge */
  width: 657px; /* Adjust the width of the container */
  padding: 10px; /* Padding inside the container */
  background-color: #f9f9f9; /* Light background color */
  border-radius: 8px; /* Rounded corners */
  display: grid; /* Use CSS Grid for layout */
  grid-template-columns: repeat(2, 1fr); /* Create two equal-width columns */
  gap: 10px; /* Space between columns and items */
}

/* Style for the heading of the section */
.features-heading {
  grid-column: span 2; /* Make the heading span across both columns */
  font-size: 24px; /* Heading size */
  font-weight: bold;
  color: #9A1360; /* Dark color for the heading */
  margin-bottom: 15px; /* Space between the heading and the first feature block */
}

/* Style for each feature block */
.feature {
  background-color: #f9f9f9;
  padding: 8px 12px; /* Reduced padding to make the box more compact */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Box-shadow kept for feature blocks */
  margin-bottom: 5px; /* Adjust the margin between feature blocks */
}

/* Style for the heading in each feature block */
.feature h3 {
  font-size: 16px; /* Font size remains reduced */
  font-weight: bold;
  color: #9A1360; /* Pink color for heading */
  margin-bottom: 3px; /* Reduced margin between heading and paragraph */
}

/* Style for the paragraph inside each feature block */
.feature p {
  font-size: 14px; /* Adjusted text size for readability */
  color: #333;
  line-height: 1.4; /* Adjust line height */
  margin: 0; /* Removed default margin */
}


/* Overlay to disable the entire page */
.overlay {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent grey */
  z-index: 9998; /* Just below the alert */
  pointer-events: auto; /* Disable interactions */
  
}



/* Style for the custom alert */
.custom-alert {
  display: none; /* Initially hidden */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 20px;
  z-index: 9999;
  width: 300px;
  text-align: center;
}

.alert-content {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.alert-content p {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.close-btn {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #9A1360;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.close-btn:hover {
  background-color: #555555;
}


/* Full-screen overlay for loading */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure it overlays on top */
}

/* Container for both ring and progress bar */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Stylish loading ring */
.loading-ring {
  position: relative;
  width: 80px;
  height: 80px;
  border: 8px solid transparent;
  border-top: 8px solid  #9A1360; /* Blue color for the top section */
  border-radius: 50%;
  animation: spin 2s linear infinite; /* Spin animation */
}

/* Inner ring with glow effect */
.loading-inner-ring {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 64px;
  height: 64px;
  border: 8px solid transparent;
  border-top: 8px solid #fff; /* White color for the inner ring */
  border-radius: 50%;
  animation: spin 2s reverse linear infinite; /* Reverse spin for inner ring */
}

/* Progress bar container */
.progress-container {
  margin-top: 20px;
  width: 100%;
  max-width: 300px;
  background-color: #ddd;
  border-radius: 10px;
  height: 10px;
  position: relative;
}

/* Progress bar that fills up */
.progress-bar {
  height: 100%;
  background-color:  #9A1360; /* Blue color */
  width: 0%;
  border-radius: 10px;
  transition: width 0.5s ease-out; /* Smooth transition for width */
}

/* Percentage text */
.percentage-text {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

/* Spin animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* General styling remains the same */
.input-table {
position: absolute;     /* Position the container absolutely */
  top: 190px;              /* Distance from the top of the screen */
  left: 10px;             /* Distance from the left of the screen */
  padding: 10px;          /* Padding for content inside */
  background-color: #fff; /* White background */
  border: 1px solid #ddd; /* Subtle border */
  border-radius: 10px;     /* Rounded corners for aesthetics */
  width: 565px;       /* Limit width to prevent overflow */
  max-height: 145px;
  z-index: 500;          /* Ensure the column stays above other elements */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

/* Table styling remains the same */
.input-table table {
  width: 585px;
  border-spacing: 0;
  margin-bottom: 20px;
}

.input-table td {
font-size: 14px;
  padding: 4px;
  vertical-align: middle;  
}

.input-table td label {
  margin-right: -60px;
  margin-bottom: 10px;
}

.input-table label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  
}

/* Input styling remains the same */
.input-table input {
  width: 80%;
  line-height: 0.5; /* Adjust line height */
  padding: 5px;
  margin: 5px 0;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 12px;
  margin-top: -5px;
  margin-bottom: -5px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.input-table input:focus {
  border-color: #007bff;
  box-shadow: 0 0 3px 3px rgba(50, 50, 50, 0.5);
  outline: none;
}

.input-table input:hover {
  border-color: #888;
}






/* Modal background */
.modal {
  display: none; /* Hidden by default */
  position: absolute;
  z-index: 1500;
  left: 0;
  top: -120px;
  width: 100%;
  height: 1080px;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  overflow: hidden; /* Prevent vertical scrolling */
}

/* Modal content (the 3D model viewer) */
.modal-content {
  position: relative;
  background-color: white;
  margin: 10% auto;
  top: -40px;
  padding: 20px;
  width: 90%; /* 80% of the screen width */
  height: 80%; /* 80% of the screen height */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow to create depth */
  overflow: hidden; /* Prevent vertical scrolling */
}

/* Close button style (X) */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* Style for the Preview Window text */
.preview-text {
  position: absolute;
  top: 5px;
  left: 15%;
  width: 150px;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: bold;
font-style: italic;
  color: #555555; /* White text color */
  /*background:  #555555; /*#9A1360; /* Gradient from #9A1360 to a complementary pink */
  padding: 10px 20px;
  border-radius: 30px; /* Rounded corners for a modern look */
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow to create depth */
  text-transform: uppercase;
  letter-spacing: 1.5px;
 /* animation: slideIn 0.5s ease-out; /* Animation for sliding effect */
  font-family: 'Arial', sans-serif; /* Stylish font */
  white-space: nowrap;
}

/* Style for the Preview Window text */
.preview-text-view {
  position: absolute;
  top: 568px;
  left: 13%;
  width: 150px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
font-style: italic;
  color: #555555; /* White text color */
  /*background:  #555555; /*#9A1360; /* Gradient from #9A1360 to a complementary pink */
  padding: 10px 20px;
  border-radius: 30px; /* Rounded corners for a modern look */
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow to create depth */
  /*text-transform: uppercase;
  
 /* animation: slideIn 0.5s ease-out; /* Animation for sliding effect */
  font-family: 'Arial', sans-serif; /* Stylish font */
  white-space: nowrap;
  letter-spacing: 0.25px;
}

/* Animation for the text */
@keyframes slideIn {
  0% {
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}


/********************************************************************************************
/* Modal Styles */
.custom-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4); /* Black with opacity */
  backdrop-filter: blur(5px); /* Adds a subtle blur effect */
}

.custom-modal-content {
  background-color: #fff;
  margin: 1% auto;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 800px;

}

.custom-close-button {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  float: right;
  cursor: pointer;

}

.custom-close-button:hover,
.custom-close-button:focus {
  color: black;
  text-decoration: none;
}

.custom-modal-content h2 {
  margin-top: 0;
}

/* Form Styles */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea {
  width: 90%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1em;
}

textarea {
  resize: vertical;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-actions {
  text-align: center;
}

.submit-button {
  background-color: #9A1360;
  width: 150px;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1.2em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  letter-spacing: 1.5px;
  font-weight: bold;
  margin-left: 650px;
}

.submit-button:hover {
  background-color: #555555;
}

/* Modal Responsive Design */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}






.download-1-button, .cancel-button {
  background-color: #9A1360;
  color: white;
  letter-spacing: 1.5px;
  font-weight: bold;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  font-size: 0.9em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100px;
  text-align: center;
  align-items: center;
 
}

.download-1-button:hover, .cancel-button:hover {
  background-color: #555555;
}