body{
	margin:0;
}
nav{
	height:2cm;
	padding-left:1%;
	padding-right:1%;
	top:0%;
	align-items:center;
}
nav > figure{
	width:18%;
}
#Logo{
	width:5cm;
	height:2cm;
	margin-top:0.4cm;
}
ul{
	list-style-type:none;
	width:40%;
	padding-right:3%;
	padding-top:1%;
}
li a{
	text-decoration:none;
	color:black;
}
header{
	background-color:white;
}
header form{
	width:36%;
	height:1cm;
}
.dropdown > button{
	background-color:white;
	border:none;
}
.dropdown-menu > li button{
	padding:0;
	padding-left:10%;
}
#Home{
	height:16cm;
	margin-top:2cm;
}
#Home figure{
	margin:0;
	height:15cm;
}
#Home img{
	height:15cm;
}
/* --- SCREEN SIZES LESS THAN 990px --- */
@media screen and (max-width: 990px){
	/* ... Keep your existing #Home, #About, and #brands styles here ... */

	#Products {
		position: absolute;
		margin-top: 50cm;
		width: 100%;
	}
	#pro {
		width: 200%;
		margin: 0 auto;
	}
	/* Activates horizontal scrolling and prevents items from wrapping */
	.product-slider {
		display: flex !important;
		flex-nowrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
		gap: 15px;
		padding-bottom: 15px; /* Adds space for the scrollbar */
	}
	/* Forces each card to occupy a fixed responsive width instead of squeezing */
	.product-card {
		flex: 0 0 75%; /* Each card takes up 75% of view width, hinting at the next slide */
		max-width: 250px;
	}
	.product-card img {
		height: 150px;
		object-fit: contain;
	}
	
}

/* --- SCREEN SIZES GREATER THAN 990px --- */
@media screen and (min-width: 990px) {
	/* ... Keep your existing #Home, #About, and #brands styles here ... */

	#Products {
		margin-top: 38cm;
		width: 100%;
	}
	#pro {
		width: 90%;
	}
	/* Removes the scroll look and arranges them perfectly in a 4-column row layout */
	.product-slider {
		display: flex !important;
		flex-direction: row;
		justify-content: space-between;
		overflow-x: visible;
	}
	.product-card {
		flex: 0 0 24%; /* Fits 4 columns evenly across the row */
	}
	.product-card img {
		height: 180px;
		object-fit: contain;
	}
}

/* Quick cleanup utility for action buttons */
.btn-action {
	cursor: pointer;
	border-radius: 4px;
	background-color: #f8f9fa;
}
.btn-action:hover {
	background-color: #e2e6ea;
}
@media screen and (max-width: 990px) {
	#Products2 {
		position: absolute;
		margin-top: 70cm; /* Adjust margin-top for Products2 dynamically if it sits below Products */
		width: 100%;
	}
	#pro2 {
		width: 200%;
		margin: 0 auto;
	}
    /* .product-slider and .product-card CSS blocks stay exactly as previously provided */
}

@media screen and (min-width: 990px) {
	#Products2 {
		width: 100%;
	}
	#pro2 {
		width: 90%;
	}
}
@media screen and (max-width:990px){
	#header2 a > span{
		font-size:50px;
	}
	#header2{
		height:3cm;
	}
	#Home figure{
		position:absolute;
		width:200%;
		background-color:white;
		left:0%;
		right:0%;
		text-align:center;
	}
	#Home img{
		text-align:center;
	}
	.Home-section{
		position:absolute;
		width:180%;
		margin-top:16cm;
		text-align:justify;
		left:10%;
		right:10%;
	}
	.Home-section .Home-sec1 > p{
		font-size:30px;
	}
	.Home-section .Home-sec1 > button{
		font-size:30px;
	}
	#About{
		margin-top:36cm;
	}	
	#About figure{
		position:absolute;
		width:200%;
		background-color:white;
		left:0%;
		right:0%;
		text-align:center;
	}
	#About-sec1 > p{
		font-size:30px;
	}
	#About-section{
		position:absolute;
		width:180%;
		margin-top:33cm;
		text-align:justify;
		left:10%;
		right:0%
	}
	#About ol{
		list-style-type:none;
		font-size:30px;
		text-align:justify;
	}
	#brands{
		position:absolute;
		width:200%;
		left:0%;
		right:0%;
		margin-top:62cm;
	}
	#brands figure img{
		height:2.5cm;
	}
	#Products{
		margin-top:66cm;
	}
	#Products figcaption{
		font-size:19px;
	}
	#Testimonials{
		position:absolute;
		width:200%;
		margin-top:78cm;
		font-size:23px;
	}
	#Contact{
		width:200%;
		height:20cm;
		left:0%;
		right:0%;
		margin-top:92cm;
	}
	#Con-sec1{
		height:20cm;
	}
	#Con-sec1 > p{
		font-size:25px;
	}
	#Con-sec1 #wh{
		font-size:20px;
	}
	#fill-info{
		font-size:21.5px;
		color:white;
	}
	#Footer{
		margin-top:112cm;
		position:absolute;
		width:200%;
		font-size:22px;
	}
	
	
}
@media screen and (min-width:990px){
	#Home img{
		border-radius:0% 100% 100% 0%;
	}
	.Home-sec1 > p{
		font-size:23px;
	}
	#About img{
		border-radius:100% 0% 0% 100%;
	}
	#About{
		margin-top:25cm;
	}
	#About-section{
		height:10cm;
		width:37.4%;
	}
	#brands{
		margin-top:34cm;
		position:absolute;
		width:100%;
	}
	#Products{
		margin-top:38cm;
		width:100%;
	}
	#brands figure img{
		height:2.5cm;
	}
	#Products figure{
		width:25%;
	}
	#Products > div{
		width:90%; 
		left:5%; 
		right:5%;
		display:flex;
		flex-direction:row;
		height:10cm;
	}
	#Products > div > div{
		width:100%; 
		left:0%; 
		right:0%
	}
	#Testimonials{
		width:90%; 
		left:5%; 
		right:5%;
		margin-top:60cm;
	}
	#Products2{
		margin-top:49cm;
	}
	#Footer{
		margin-top:91cm;
		position:absolute;
		width:100%;
	}
	#fill-info legend{
		margin-top:0.5cm;
	}
	#Contact{
		width:100%;
		left:0%;
		right:0%;
		margin-top:72cm;
	}
}
.Home-section{
	height:10cm;
}
.Home-sec1{
	height:9cm;
}
#About figure{
	margin:0;
}
#About img{
	height:15cm;
}
.About-sec1{
	height:9cm;
}
#brands{
	overflow-x:scroll;
	height:2.75cm;
	background-color:white;
	scrollbar-width:none;
}
#brands figure{
	margin:0%;
}
#brands figure img{
	height:2.5cm;
}
#Products figure:hover{
	box-shadow:1px 4px 10px grey;
}
#Products img{
	height:4cm;
}
#Products p span{
	color:green;
}
#Products p span:hover{
	background-color:green;
	color:white;
}
#buy{
	color:green;
}
#buy:hover{
	color:white;
	background-color:green;
}
#Products2 figure{
	width:25%;
}
#Products2 figure:hover{
	box-shadow:1px 4px 10px grey;
}
#Products2 img{
	height:4cm;
}
#Products2 p span{
	color:green;
}
#Products2 p span:hover{
	background-color:green;
	color:white;
}
#Products2 .Top2{
	margin-top:40cm;
}
#Products2 p a{
	color:green;
	text-decoration:none;
}
#Products2 p a:hover{
	color:white;
	background-color:green;
}
.testimonial-carousel {
    border:2px solid lightgrey;
	background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding:18px 0;
	border-radius:20px;
}
.testimonial-card{
    background-color:rgba(255, 255, 255, 0.9);
	border-radius:15px;
	padding:30px;
	box-shadow:0 10px 20px rgba(0, 0, 0, 0.1);
}
.testimonial-img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
}
.quote-icon {
	font-size: 3rem;
	color: #764ba2;
	opacity: 0.3;
}
#Contact{
	background-image:url("https://static.vecteezy.com/system/resources/thumbnails/039/000/214/small_2x/ai-generated-assortment-of-different-cheese-and-milk-types-on-wooden-background-photo.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	height:18cm;
	background-position:center center;
	background-attachment:cover;
	border-radius:10px;
}
#Con-sec1{
	background-color:rgba(0, 0, 0, 0.2);
	height:18cm;
	border:2px solid black;
	border-radius:10px;
}
#Con-sec1 .text{
	width:90%;
	left:5%;
	right:5%;
	text-align:center;
	color:white;
}
#wh{
	font-size:14px;
}
@media screen and (max-width:550px){
	#wh{
		position:absolute;
		width:100%;
	}
	#fill-info{
		position:absolute;
		width:100%;
		margin-top:12cm;
		padding-bottom:1cm;
	}
	#Contact{
		height:30cm;
	}
	#Con-sec1{
		height:30cm
	}
	#Footer{
		margin-top:123cm;
	}
}
@media screen and (min-width:550px){
	#wh{
		width:50%;
	}
	#fill-info{
		width:50%; 
		left:50%; 
		right:0%
	}
}
.ins{
	height:1cm;
	width:1cm;
	text-align:center;
	font-size:22px;
	background-color:white;
	border-radius:100px;
	color:black;
	border:2px solid black
}
.ins:hover{
	background-color:rgb(0, 0, 0);
	color:white;
	border:2px solid white;
}
#Contact fieldset{
	border:2px solid white;
	border-radius:30px 0px 30px 0px;
	background-color:rgba(255, 255, 255, 0.34);
	height:10.45cm;
}
.social-icon {
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    display: inline-block;
    margin: 0 8px;
    transition: all 0.3s ease;
}
.social-icon:hover {
    transform: translateY(-3px);
    color: #fff;
}
@media screen and (min-width:1450px){
	#About-section{
		width:55%;
	}
}