/* Product Section Styles */
#featured-products {
    padding: 5px;
    background-color: #f8f9fa; /* Light gray background */
}

#featured-products h2 {
    text-align: center;
    margin-bottom: 30px;
}

#products-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px; /* Reduced gap */
   padding: 0 20px; /* Adjusted padding */
}

.product-item {
    border: 1px solid #dee2e6; /* Light gray border */
    padding: 15px;
    border-radius: 5px;
    text-align: center;
	  margin-bottom: 20px;
	   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Modern-looking shadow */
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition for hover effect */
	
	 max-width: 230px; /* Adjusted max-width for better responsiveness */
	   white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Hide overflowing text */
        text-overflow: ellipsis; /* Show ellipsis (...) for overflow text */
}

.product-item:hover {
    box-shadow: 20px 10px 17px 10px  rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
}

.product-item img {
    width: 100%;
    height: auto;
    margin-bottom: 1px;
	 width: 190px; /* Adjust this value to make the block smaller */
    height: 190px; /* This ensures the height adjusts based on content */
}

@media (max-width: 768px) {
	
	.product-item {
        font-size: 14px; /* Adjusted font size for product name and price */
        max-width: 190px; /* Adjusted max-width for better responsiveness */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Hide overflowing text */
        text-overflow: ellipsis; /* Show ellipsis (...) for overflow text */
    }
	
	
    .product-item {
        width: 150px; /* Even smaller blocks for mobile devices */
    }
    .product-item img {
        width: 100%; /* Adjust as needed for smaller screens */
	 height: auto;
	 max-height: 130px;
    }
	
	
	.product-item h3
	{
        font-size: 15px; /* Adjusted font size for product name and price */
		font-weight: bold;
    }
    .product-item h3 {
        margin-bottom: 3px; /* Adjusted margin for product name */
    }
    .product-item b {
        font-size: 12px; /* Adjusted font size for price */
    }
	
	
	
	
	
	
	
}














.product-item button {
    background-color: black; /* Bootstrap primary color */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s; /* Smooth transition for hover effect */
}

.product-item button:hover {
    background-color: #555; /* Lighter shade of black for highlight */
    color: #fff; /* Keep text color white for contrast */
}


.product-item h3 {
    margin-bottom: 1px; /* Reduced from a larger value */
 margin-top: 5px;
 
	}

.product-item p {
 margin-top: 1px; /* Reduced from a larger value */
    margin-bottom: 1px; /* Reduced from a larger value */
}

.product-item button {
    margin-top: 1px; /* Reduced from a larger value */

	}





	
	
	/* css for other parts of website pet */
	/* css for other parts of website pet */
	/* css for other parts of website pet */
		
				/* css for other parts of website pet */
				/* css for other parts of website pet */
				/* css for other parts of website pet */	
	
							/* css for other parts of website pet */
							/* css for other parts of website pet */	
							/* css for other parts of website pet */

											/* css for other parts of website pet */	
											/* css for other parts of website pet */
											/* css for other parts of website pet */
	
							/* css for other parts of website pet */
							/* css for other parts of website pet */
							/* css for other parts of website pet */	

				/* css for other parts of website pet */
				/* css for other parts of website pet */	
				/* css for other parts of website pet */

	/* css for other parts of website pet */	
	/* css for other parts of website pet */
	/* css for other parts of website pet */

	
	
	
	
	
	
/* Default styles */



.nav-tabs li a {
    background-color: #a5e0f2;
    border: 3px solid transparent;
    font-size: 14px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    white-space: nowrap; /* Prevent text wrapping */
}




/* Mobile specific styles */
@media (max-width: 768px) {
	
	/* tabs  */
	.col-sm-8
	{
		padding-left: 10px;
    padding-right: 10px;
		
	}
	
   .nav-tabs {
   
   padding-top: 50px;
   
   }

    



    .nav-tabs li a {
        padding: 7px 3px; /* Adjust padding if needed */
    }

    
}



#reviews-container {
    width: 300px; /* Set the width of the reviews window */
    height: 200px; /* Set the height of the reviews window */
    overflow: hidden; /* Hide overflowing content */
    position: relative; /* Position the button relative to the container */
}

#reviews-window {
    position: absolute; /* Position the reviews window */
    top: 0; /* Align to the top of the container */
    left: 0; /* Align to the left of the container */
}

#next-page-btn {
    position: absolute; /* Position the button */
    bottom: 0; /* Align to the bottom of the container */
    right: 0; /* Align to the right of the container */
}