@keyframes fadeInUp {
		            from {
		                opacity: 0;
		                transform: translateY(20px);
		            }
		            to {
		                opacity: 1;
		                transform: translateY(0);
		            }
		        }

		        @keyframes scaleIn {
		            from {
		                transform: scale(0.9);
		                opacity: 0;
		            }
		            to {
		                transform: scale(1);
		                opacity: 1;
		            }
		        }

		        @keyframes rotateIn {
		            from {
		                transform: rotateY(-90deg);
		                opacity: 0;
		            }
		            to {
		                transform: rotateY(0);
		                opacity: 1;
		            }
		        }

		        /* Apply animations to elements */
		        .product-card {
		            animation: scaleIn 0.5s ease-out;
		        }

		        .gallery-item {
		            animation: fadeInUp 0.5s ease-out;
		        }

		        .company-profile {
		            animation: fadeInUp 0.7s ease-out;
		        }

		        .logo-container img {
		            animation: rotateIn 1s ease-out;
		        }
				.features {
					            animation: rotateIn 4s ease-out;
					        }
		        .features li {
		            animation: fadeInUp 0.6s ease-out;
		            animation-fill-mode: both;
		        }

		        .features li:nth-child(1) { animation-delay: 0.1s; }
		        .features li:nth-child(2) { animation-delay: 0.2s; }
		        .features li:nth-child(3) { animation-delay: 0.3s; }
		        .features li:nth-child(4) { animation-delay: 0.4s; }
		        .features li:nth-child(5) { animation-delay: 0.5s; }
		        .features li:nth-child(6) { animation-delay: 0.6s; }
		        .features li:nth-child(7) { animation-delay: 0.7s; }

		        /* Hover animations */
		        .product-card:hover {
		            transform: translateY(-5px) scale(1.03);
		            transition: all 0.3s ease;
		        }

		        .gallery-item:hover img {
		            transform: scale(1.1) rotate(2deg);
		            transition: all 0.3s ease;
		        }

		        .more-details-btn:hover {
		            transform: scale(1.1);
		            transition: all 0.3s ease;
		        }

		        /* Animated background for the main content */
		      

		        @keyframes gradientBG {
		            0% { background-position: 0% 50%; }
		            50% { background-position: 100% 50%; }
		            100% { background-position: 0% 50%; }
		        }

		        /* Animated underline for nav links */
		        .nav-link::after {
		            content: '';
		            display: block;
		            width: 0;
		            height: 2px;
		            background: #ffda79;
		            transition: width 0.3s;
		        }

		        .nav-link:hover::after {
		            width: 100%;
		        }

		        /* Pulse animation for CTA buttons */
		        @keyframes pulse {
		            0% { transform: scale(0.5); }
		            50% { transform: scale(1.05); }
		            100% { transform: scale(1); }
		        }

		         body {
             font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
             background: linear-gradient(to bottom,white,lightgray, lightblue); 
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow-x: hidden;
        }
      

        .container {
            flex: 1;
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .sidebar {
            width: 20%;
            background: linear-gradient(to bottom,white, #ffffff,darkslategray); 
            padding: 50px;
            color: white;
            font-size: 18px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .sidebar h1 {
            font-size: 32px;
            margin-bottom: 40px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: black;
            text-align: center;
        }

		.features {
		    padding: 1px;
		    font-size: 18px;
		    list-style: none;
		    margin-top: 20px;
		}

		.features li {
		    margin-bottom: 25px;
		    transition: color 0.3s;
		    position: relative;
		    padding-left: 25px;
		    color: darkblue;
		    opacity: 0; /* Initially hidden */
		    transform: translateY(20px); /* Start from below */
		   
		}

		.features li:hover {
		    color: #ffda79;
		}

		.features li::before {
		    content: "✔";
		    position: absolute;
		    left: 0;
		    color: darkorange;
		    font-size: 25px;
		}

		@keyframes fadeIn {
		    to {
		        opacity: 1;
		        transform: translateY(0);
		    }
		}

		.navbar {
		          justify-content: center;
		          align-items: center;
		          gap: 50px;
		          background-color: transparent;
		          padding: 2px 10px;
		          position: absolute;
		          top: 15px;
		          z-index: 10;
		      }

		      .navbar .navbar-nav {
		          display: flex;
		          list-style: none;
		          gap:-15px;
		      }

		      .navbar .nav-item {
		          position: relative;
		      }

		      .navbar .nav-link {
		          color:white;
		          text-decoration: none;
		         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
		          font-size: 16px;
		          font-weight: bold;
		          text-transform: uppercase;
		          padding: 2px 5px;
		          transition: color 0.3s ease;
		      }

		      .navbar .nav-link:hover {
		          color: lightblue;
		      }

		      .navbar .dropdown-menu {
		          position: absolute;
		          top: 100%;
		          left: 0;
		          background-color: rgba(240, 248, 255, 0.3); 
		         
		         
		          display: none;
		          padding: 2px 0;
		          min-width: 100px;
		          transform-origin: top center;
		          transform: scaleY(0);
		          transition: transform 0.3s ease;
		      }

		      .navbar .nav-item:hover > .dropdown-menu {
		          display: block;
		          transform: scaleY(1);
		      }

		    .dropdown-item {
		          font-size: 16px;
		          padding: 2px 10px;
		          color:black;
		          font-weight: bold;
		          text-decoration: none;
		          display: block;
		          transition: background-color 0.3s ease;
		      }

		      .dropdown-item:hover {
		          background-color: lightblue;
		      }

		      .submenu {
		          position: absolute;
		          left: 100%;
		          top: 0;
		          display: none;
		          background-color: rgba(240, 248, 255, 0.3); 
		          border-radius: 4px;
		          
		          min-width: 150px;
		          transform-origin: left center;
		          transform: scaleX(0);
		        
		      }

		      .dropdown-item:hover > .submenu {
		          display: block;
		          transform: scaleX(1);
		      }

		      .submenu-item {
		          font-size: 14px;
		          padding: 4px 15px;
		          color:black;
		          text-decoration: none;
		          display: block;
		         
		      }



			  nav ul {
			  		    list-style: none;
			  		    display: flex;
			  		}

			  		nav ul li {
			  		    margin-right: 25px;
			  		    opacity: 0;
			  		    animation: fadeInRight 1s ease-in-out forwards;
			  		}

			  		nav ul li:nth-child(2) {
			  		    animation-delay: 0.2s;
			  		}
			  		nav ul li:nth-child(3) {
			  		    animation-delay: 0.4s;
			  		}
			  		nav ul li:nth-child(4) {
			  		    animation-delay: 0.6s;
			  		}

			  		nav ul li a {
			  		    color: white;
			  		    text-decoration: none;
			  		    font-size: 16px;
			  		}

			  		/* Animations */
			  		@keyframes fadeInLeft {
			  		    from {
			  		        opacity: 0;
			  		        transform: translateX(-30px);
			  		    }
			  		    to {
			  		        opacity: 1;
			  		        transform: translateX(0);
			  		    }
			  		}

			  		@keyframes fadeInRight {
			  		    from {
			  		        opacity: 0;
			  		        transform: translateX(30px);
			  		    }
			  		    to {
			  		        opacity: 1;
			  		        transform: translateX(0);
			  		    }
			  		}/* Responsive Navbar */
			         
        .main-content {
            width: 80%;
            display: flex;
            align-items: center;
            justify-content: center;
      background-color: darkslategray;
            padding: 30px;
            position: relative;
        }

        .main-content img {
            position: absolute;
			top:80px;
            width: 90%;
            max-width: 100%;
            border-radius: 1px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
        }

        .content-section {
            padding: 100px 20px;
            text-align: center;
        }

        .inquiry-section {
             background-image: url('THINTURE_IMAGE/board.jpg');
            padding: 30px;
            margin-top: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 70%;
            max-width: 600px;
            margin: 40px auto;
        }

        .inquiry-section h2 {
            margin-bottom: 20px;
            color: #4a4a34;
            text-align: center;
        }

        .inquiry-section input,
        .inquiry-section textarea {
            width: calc(100% - 20px);
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

      .inquiry-section button {
    background-color: orange;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s;
    animation: waitingMachine 1.5s linear infinite; /* Rotate animation for waiting effect */
}



        .inquiry-section button:hover {
            background-color: #3b3b28;
        }

        .footer {
           background-color:darkslategray;
            color: white;
            text-align: center;
            padding: 20px 0;
            width: 100%;
            font-size: 14px;
            position: relative;
        }

        .footer div {
            margin-bottom: 10px;
        }

        .footer div a {
            color: #ffda79;
            margin: 0 10px;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer div a:hover {
            color: #ffffff;
        }

        .footer div i {
            font-size: 18px;
        }

        /* Media Queries for Responsive Design */
    

	.products-section {
		    background-color: silver;
		    padding: 50px 20px;
		    text-align: center;
		}

		.products-section h2 {
		    color: #333;
		    margin-bottom: 40px;
		}

		.product-card-container {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    gap: 30px;
		}

		.product-card {
		    background-image: url('THINTURE_IMAGE/board.jpg');
		    border-radius: 10px;
		    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		    width: 300px;
		    padding: 20px;
		    transition: transform 0.3s ease;
		}

		.product-card:hover {
		    transform: translateY(-5px);
		}

		.product-card img {
		            width: 100%;
		            height: auto;
		            transition: transform 0.4s ease; /* Smooth transform effect on hover */
		        }

		        /* Zoom and 3D effect on hover */
		        .product-card:hover img {
		            transform: scale(1.1) rotateY(15deg); /* Zoom in and rotate the image */
		        }


		.product-card h3 {
		    margin: 20px 0 10px;
		    font-size: 22px;
		    color: #4a4a34;
		}

		.product-card p {
		    font-size: 16px;
		    color: #666;
		    margin-bottom: 20px;
		}

		.more-details-btn {
		    background-color: #4a4a34;
		    color: white;
		    border: none;
		    padding: 10px 20px;
		    font-size: 16px;
		    cursor: pointer;
		    border-radius: 5px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    gap: 10px;
		    transition: background-color 0.3s ease;
		}

		.more-details-btn:hover {
		    background-color: #3b3b28;
		}

		.more-details-btn i {
		    font-size: 16px;
		}
		.logo-container {
		            text-align: center;
		            margin-top: -20px;
		        }

		        .logo-container img {
		            max-width: 150px; /* Adjust logo size */
		            height: auto;
		        }
				.company-profile {
				    
				    max-width: 800px;
				    margin: 20px auto;
				    padding: 20px;
				    border: 1px solid #ccc;
				    border-radius: 8px;
				    background-color: #f9f9f9;
				    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
				}

				.profile-header {
				    display: flex;
				    align-items: center;
				    margin-bottom: 20px;
				}

				.company-logo {
				    width: 100px;
				    height: auto;
				    border-radius: 8px;
				    margin-right: 20px;
				}

				.company-info h3 {
				    margin: 0;
				    font-size: 24px;
				}

				.tagline {
				    font-size: 18px;
				    color: #777;
				    margin: 5px 0;
				}

				.company-details {
				    margin-top: 20px;
				}

				.company-details h4 {
				    margin-top: 15px;
				    font-size: 20px;
				}

				.company-details p,
				.company-details ul {
				    margin: 5px 0;
				    line-height: 1.5;
				}

				.company-details ul {
				    list-style-type: disc;
				    padding-left: 20px;
				}

				.company-details strong {
				    font-weight: bold;
				}
				.gallery-section {
				    max-width: 1200px;
				    margin: 20px auto;
				    padding: 20px;
				    text-align: center;
				}

				.gallery-section h2 {
				    font-size: 28px;
				    margin-bottom: 20px;
				}

				.gallery-grid {
				    display: grid;
				    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
				    gap: 15px;
				}

				.gallery-item {
				    position: relative;
				    overflow: hidden;
				    border-radius: 8px;
				    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				}

				.gallery-item img {
				    width: 100%;
				    height: auto;
				    transition: transform 0.3s ease;
				}

				.gallery-item:hover img {
				    transform: scale(1.05);
				}

				.gallery-item p {
				    position: absolute;
				    bottom: 10px;
				    left: 10px;
				    background: rgba(0, 0, 0, 0.5);
				    color: white;
				    padding: 5px 10px;
				    border-radius: 5px;
				    font-size: 14px;
				}
				.tab {
				           display: none; /* Hidden by default */
				           position: fixed;
				           top: 50%;
				           left: 50%;
				           transform: translate(-50%, -50%);
				          
						 
				           border: 5px solid #ccc;
				           border-radius: 8px;
				           background-color: white;
				           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
				           z-index: 1000; /* Higher z-index to overlay above other elements */
				       }

				       .tab-header {
				           display: flex;
				           justify-content: space-between;
				           padding: 2px;
				           background-color:darkgray;
				           color: white;
				           border-radius: 8px 8px 0 0;
				       }

				       .tab-header h2 {
				           margin: 0;
				           font-size: 18px;
				       }

				      .tab-header .close-btn {
				           background: none;
				           border: none;
				           color:red;
				           cursor: pointer;
				           font-size: 18px;
				       }

				       #door-details {
				           padding: 16px;
				       }

				       .back-btn {
				           margin-top: 12px;
				           display: inline-block;
				           padding: 8px 16px;
				           background-color: #007BFF;
				           color: white;
				           text-decoration: none;
				           border-radius: 4px;
				       }

				       .back-btn:hover {
				           background-color: #0056b3;
				       }
					  .door-img{
						width:30%;
						height: 30%;
					  }
					  .image-container {
					              position: relative;
					              width: 20%; /* Set your desired width */
					              margin: 20px auto; /* Center the image */
					          }

					          .image-container img {
					              width: 100%; /* Make the image fill the container */
					              cursor: pointer; /* Change cursor to pointer on hover */
					              transition: transform 0.5s ease; /* Smooth zoom effect */
					          }

					          .image-container img:hover {
					              transform: scale(1.05); /* Slight zoom on hover */
					          }

					          /* Modal Styles */
					          #image-modal {
					              display: none; /* Hidden by default */
					              position: fixed;
					              top: 0;
					              left: 0;
					              width: 100%;
					              height: 100%;
					              background-color: transparent; /* Semi-transparent background */
					              justify-content: center;
					              align-items: center;
					              z-index: 1000; /* Higher z-index to overlay above other elements */
					          }

					          #image-modal .modal-content {
					              perspective: 1000px; /* Perspective for 3D effect */
								 
								  transform-style: preserve-3d; /* Preserve 3D effect for children */
					              transform: rotateY(10deg); /* Slight rotation for 3D view */
					              transition: transform 0.5s; /* Smooth transition */
					          }

					          #image-modal img {
								background-color: white;
					              width: 70%; /* Adjust the image size in the modal */
					              transform: rotateY(0deg); /* Initial rotation */
					              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
					          }

					        #image-modal  .close-btn {
					              position: absolute;
					              top: 20px;
					              right: 400px;
					              background: none;
					              border: none;
					              color:red;
					              cursor: pointer;
					              font-size: 34px;
					          }
							  #backToTop {
							      position: fixed;
							      bottom: 20px;  /* Distance from the bottom */
							      right: 20px;   /* Distance from the right */
							      padding: 10px 20px;
							      background-color:transparent; /* Change color as needed */
							      color: red;
							      border: none;
							      border-radius: 5px;
							      cursor: pointer;
							      font-size: 16px;
							      z-index: 1000; /* Ensure it's on top */
							  }

							  #backToTop:hover {
							      background-color:transparent; /* Darker shade on hover */
							  }