:root
{
	--pink: red;
	--black: #130f40;
	--light-color: #666;
	--box-shadow: 0.1rem 0.1rem rgba(0,0,0.1);
	--border: 2rem solid rgba(0,0,0.1);
	--outline: 1rem solid rgba(0,0,0.1);

}


*
{
font-family:'poppins',sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
text-decoration: none;
text-transform: capitalize;
transition:all .2s linear;
}



html
{
	font-size: 62.5%;
	overflow-x: hidden;
	scroll-behaviour: smooth;
	scroll-padding-top: 7rem;
}



body
{
background:#fff;
}

section 
{
pdding: 2rem 9%;
}




.btn
{
border: .2rem solid var(--black);
margin-top: 1rem;
display: inline-block;
padding: .8rem 3rem;
font-size: 1.7rem;
border-radius: .5rem;
color: var(--black);
cursor: pointer;
}


.btn:hover
{
	background: var(--pink);
	color:white;
}



.header
{
border:0px solid;
position:fixed;
width:100%;
height: 150px;
top: 0;
left: 0;
right: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 10%;
background:#fff;
box-shadow: var(--box-shadow);
}


.header.logo 
{
font-size: 5rem;
font-weight: bolder;
}


header .navbar a:hover
{
	color: var(--pink);
}


.header .navbar a
{
    font-size:2.0rem;
    margin:0 1rem;
    color: var(--black);
	text-align:right;
}


.header .icons div 
{
	height: 4.5rem;
	width: 4.5rem;
	line-height: 4.5rem;
	border-radius: .5rem;
	background: #eee;
	color: var(--black);
	font-size: 2rem;
	margin-right: .3rem;
	text-align:center;
	cursor:ponter;
        background: none;
}


.header .icons div:hover
{
	background: var(--pink);
	color:white;
}


#menu-btn
{
display:none;
}
  
  #login-btn
{
display:none;
}
  
.header .navbar.active
{
	right: 2rem;
	transition: .2s linear;
}



.header .login-form
{
	border: 0px solid;
	position: absolute;
	top: 110%;
	width:25%;
	right:-50rem;
	box-shadow: var(--box-shadow);
	padding: 2rem;
	border-radius: .5rem;
        background:#fff;
	text-align:center;
}


.header .login-form.active
{
	right: 2rem;
	transition: .2s linear;
}





.header .login-form h3 
{
	font-size:2.5rem;
	text-transform: uppercase;
	color: var(--black);
}



.header .login-form .box 
{
	width: 80%;
	border: 0px  solid;
	margin: .7rem 0;
	background: #eee;
	border-radius: 0rem;
	padding: 20rem;
	font-size: 1.6rem;
	color: var(--black);
	text-transform:none;
}


.header .login-form p
{
font-size: 1.5rem;
padding: .6rem .1;
color: var(--light-color);
}


.header .login-form pa
{
	color: var(--light-color);
	text-decorstion:underline;
}


.header .login-form a:hover
{
	background: var(--pink);
	color:white;
}



.home 
{
border:0px solid;
display: flex;
justify-content: center;
background-size: cover;
background-position: center;
padding-top: 19rem;
padding-bottom: 10rem;
background:url(../image/banner-img3.jpg ) no-repeat;
background-size: 100% 100%;

}


* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        /* Container for the slider */
        .home .description {
            width: 80%;
            margin: auto;
            overflow: hidden;
            position: relative;
            background: #f9f9f9;
            border-radius: 10px;
            padding: 30px;
            margin-top: 10px;
            text-align: center;
            border: 1px solid;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            background-color: lightpink}






.home .content

{
	border: 0px solid;
	text-align:center;
	width: 60rem;
	margin-left: 2rem;
}
.home .content h3
{
	color: var(--black);
	font-size: 2.5rem;
	text-align:center;
    
	
}

.home .content p
{
	color:black;
	font-size: 2rem;
	text-align:center;
	
}


.home .content h3 span
{
	color: maroon;
	
}


.features {
    border: 0px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
    flex-wrap: wrap; /* Ensures responsiveness */
    background:url(../image/banner-img1.jpg) no-repeat;
background-size: 100% 100%;

}

.features .content {
    border: 0px solid;
    text-align: center;
    width: 100%;
    margin-left: 2rem;
}

.features .content h3 {
    color: var(--black);
    font-size: 3.5rem;
    text-align: center;
    margin-top: 2rem;
    padding: 3.8rem 0.5rem;
}

.features .content h3 span {
    color: green;
    font-weight: bold;
}

.features-data {
    display: flex; /* Changed from grid to flexbox */
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    gap: 3rem; /* Reduced gap for better spacing */
    justify-content: center; /* Center items horizontally */
    width: 100%;
    padding: 2rem;
}

.features-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    background: none;
    max-width: 30rem; /* Control item width */
    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
    background-color: #fff;
}

.features-items:hover {
    background-color:#eee;
    border-color: green;
}

.features-items img {
    width: 100%;
    max-width: 30rem;
    height: 20rem;
    object-fit: cover; /* Ensures images look good */
    border-radius: 8px;
}

.features-items p {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    color: maroon;
    font-weight: bold;
}


.products {
    border: 0px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
    flex-wrap: wrap; /* Ensures responsiveness */
   background-color: mystyrose;
background-size: 100% 100%;

}

.products .content {
    border: 0px solid;
    text-align: center;
    width: 100%;
    margin-left: 2rem;
}

.products .content h3 {
    color: var(--black);
    font-size: 2.5rem;
    text-align: center;
    margin-top: 2rem;
    padding: 3.8rem 0 5rem;
}

.products .content h3 span {
    color: green;
}

.grid-container {
    display: flex; /* Change from grid to flex */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 3rem; /* Reduce gap for better spacing */
    justify-content: center; /* Center items horizontally */
    width: 100%;
    padding: 2rem;
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 10px;
    max-width: 30rem; /* Control item width */
}

.grid-item:hover {
    background-color: #eee;
    border-color: green;
}



.grid-item img {
    width: 100%;
    max-width: 30rem;
    height: 20rem;
    object-fit: cover; /* Ensures images look good */
    border-radius: 8px;
}

.grid-item p {
    margin-top: 1rem;
    font-size: 2rem;
}

.review
{
border:0px solid;
display: flex;
justify-content: center;
background-size: cover;
background-position: center;
padding-top: 19rem;
padding-bottom: 10rem;
background:url(../image/banner-img2.jpg) no-repeat;
background-size: 100% 100%;


}
.review .content

{
	border: 0px solid;
	text-align:center;
	width: 100%;
	margin-left: 2rem;
}


.review .content h1 {
    color: var(--black);
    font-size: 2.5rem;
    text-align: center;
    margin-top: 2rem;
    padding: 3.8rem 0 5rem;
}

    

.review .content h1 span
{
    color: green;
}




 * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        /* Container for the slider */
        .slider-container {
            width: 80%;
            margin: auto;
            overflow: hidden;
            position: relative;
            background: #f9f9f9;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        /* Review slider wrapper */
        .slider-container .review-slider {
            display: flex;
            transition: transform 6s ease-in-out;
        }

        /* Each review */
        .slider-container .reviews {
            min-width: 100%;
            box-sizing: border-box;
            padding: 20px;
        }

        .slider-container .reviews p {
            font-size: 18px;
            margin-bottom: 10px;
            color: black;
        }

        .slider-container .reviews h4 {
           
            font-weight: bold;
            color:green;
            font-size: 20px;
        }
        .slider-container .reviews .stars 
        {
        	padding: 1rem 1rem ;
        	color: gold;
        	font-size: 25px;
        }

        /* Navigation Buttons */
        .slider-container .prev,
        .slider-container .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: #333;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 18px;
            border-radius: 5px;
        }

        .slider-container .prev { left: 10px; }
        .slider-container .next { right: 10px; }

        .slider-container .prev:hover,
        .slider-container .next:hover {
            background: #555;
        }




 












.about
{
border:0px solid;
display: flex;
justify-content: center;
background-size: cover;
background-position: center;
padding-top: 19rem;
padding-bottom: 10rem;
background-color: #eee;
background-size: 100% 100%;
margin-top: 10rem;


}




 .container {
            width: 80%;
            margin: auto;
            text-align:center;
            background-color: lightcoral;

            padding: 50px 40px;
        }
        h1 {
            font-size: 3.5em;
            color: green;
        }
        p {
            font-size: 1.5em;
            line-height: 1.6;
            color:maroon;
        
        }
        .box {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            text-align: left;
            margin-right: 10rem;
            background-color:lightgoldenrodyellow;
        }
        .contact-details .social-icons {
            margin: 0 10px;
            color: white;
            font-size:50px;
            text-decoration: none;
            justify-content:space-between;
            color:green;
        }
         .contact-details .social-icons a:hover {
            color: #007bff;
   }
        
        .contact-details p {
            margin: 20px 0;
            font-size: 10px;
        }
        .contact-details strong {
            color: #007bff;
        }
        @media (max-width: 410px) {
            .container {
                width: 95%;}}


/*footer*/
 .footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 0px;
        }
        .footer p
        {
            color: white;
        }
        .footer .footer-links a {
            color: #bbb;
            text-decoration: none;
            margin: 0 15px;
            font-size: 2em;
        }
        .footer .footer-links a:hover {
            color: #007bff;
        }
        .footer .social-icons {
            margin-top: 10px;
        }
        .footer .social-icons a {
            margin: 0 10px;
            color: white;
            font-size:2.5em;
            text-decoration: none;
        }
        .footer .social-icons a:hover {
            color: #007bff;
        }
        @media (max-width: 768px) {
            .container {
                width: 95%;
            }
            .footer .footer-links a {
                display: block;
                margin: 10px 0;
            }
        }








/*media queries*/
@media (max-width:991px)
{

	html
	{
	font-size: 55%;
	}
	.header
	{ 
	padding: 2rem;
	}
	section
	{
	  padding: 2rem;
         }
}

@media (max-width:768px)
{
	#menu-btn
	{
	display:inline-block;
	}

		.header .navbar
		{
		position: absolute;
		width: 25rem;
		right:-80%;
		top: 110%;
		box-shadow: var(--box-shadow);
		border-radius: .5rem;
		background:#fff;
		}

		.header .navbar a
		{
		font-size: 2rem;
		margin: 2rem 2.5rem;
		display: block;
		
}
}



@media (max-width:450px)
{

	html
	{
	font-size: 50%;
	}




}



.whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 100px;
    z-index: 1000;
    background-color: transparent;
}

.whatsapp img {
    width: 100%;
    height: auto;
    border-radius: 10%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.whatsapp img:hover {
    transform: scale(1.1);
  }


 
@media (max-width:400px) {
    .slider-container {
        width: 80%; 
        padding: 10px; 
    }

    .slider-container .reviews p {
        font-size: 16px;
    }

    .slider-container .reviews h4 {
        font-size: 18px; 
    }

    .slider-container .reviews .stars {
        font-size: 22px;
    }

  
    .slider-container .prev,
    .slider-container .next {
        font-size: 14px;
        padding: 6px;
    }

    .slider-container .prev { left: 5px; }
    .slider-container .next { right: 5px; }
}