@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,300&display=swap');

:root{
	--green: rgb(168, 9, 9);
	--black: #110d3a;
	--light-color: #000000;
	--box-shadow: 0 .5rem 1.5rem rgba(0,0,0, .1);
	--border: .1rem solid rgba(0,0,0.1);
	--outline: 1rem solid rgba(0,0,0.1);
}

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

   /* styling rules for the html element */
    html{
    	font-size: 62.5%;
    	overflow-x: hidden;
    	scroll-behavior: smooth;
    	scroll-padding-top: 7rem;
    }

  /* styling rules for the body element */
    body{
    	background:#eee;
    }

  /* CSS code for Banner */
section
{
    padding: 2rem 9%;
}

.heading
{
	text-align: center;
	padding: 2rem 0;
	padding-bottom: 3rem;
	font-size: 3.5rem;
	clip: var(--black);
}

.heading span
{
	background: var(--green);
	color: #fff;
	display: inline-block;
	padding: .5rem 3rem;
	clip-path: polygon(100% 0, 93% 50%, 100% 99% , 0% 100%, 7% 50%, 0% 0%);
}

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

.btn:hover{

	background: var(--green);
	color: #fff;
}

   /* styling rules for the header element */
     .header{
     	border: 0px solid;
     	position: fixed;
     	top: 0;
     	left: 0;
     	right: 0;
     	z-index: 1000;
     	display: flex;
     	align-items: center;
        justify-content: space-between;
        padding: 2rem 9%;
        background: #fff;
        box-shadow: var(--box-shadow);
		color: rgb(168, 9, 9);
     }

   /* styling rules for the logo within the header */
     .header .logo
     {
     	font-size: 2.5rem;
     	font-weight: bolder;
     }

     .header .logo i
     {
     	color: var(--green);
     }

   /* styling rules for navigation links within the header */
     .header .navbar a
     {
     	font-size: 1.7rem;
     	margin: 0 1rem;
     	color: var(--black);
     }

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

      .header .icons div
      {
      	border: px solid;
        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: pointer;
      }

  /* styling rules for icons within the header */ 
      .header .icons div:hover
      {
      	background: var(--green);
      	color: white;
      }

      #menu-btn
      {
      	display: none;
      }

      .header .navbar.active
      {
      	right: 2rem;
      	transition: .8s linear;
      }

 /* styling rules for the search form within the header */
      .header .search-form
      {
      	border: 0px solid;
        position: absolute;
        top: 110%;
        right: -110%;
        width: 50rem;
        height:  5rem;
        background: #fff;
        border-radius: .5rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        box-shadow: var(--box-shadow);
      }

  /* search bar display on click */ 
       .header .search-form.active
       {
         right: 2rem;
         transition: .8s linear;
       }

      .header .search-form input
      {
      	height: 100%;
      	width: 100%;
      	background: none;
      	text-transform: none;
      	font-size: 1.6rem;
      	color: var(--black);
      	padding: 0 1.5rem;
      }

      .header .search-form label
      {
      	font-size: 2.2rem;
      	padding-right: 1.5rem;
      	color: var(--black);
      	cursor: pointer;
      }

      .header .search-form label:hover
      {
      	color: var(--green);
      }
 /* styling rules for the search form within the header */   


   /* Styling Login Form */
.header .login-form
{
	border: 1px solid;
	position: absolute;
	width: 30rem;
	top: 110%;
	right: -110%;
	box-shadow: var(--box-shadow);
	padding: 2rem;
	border-radius: .5rem;
	background: #fff;
	text-align: center;
}

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

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

}

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

.header .login-form p
{
	font-size: 1.4rem;
	padding: .5rem 0;
	color: var(--light-color);
}

.header .login-form p a
{
	color: var(--green);
	text-decoration: underline;
}
   /* Styling Login Form */

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

.home .content
{
	border: 0px solid;
	text-align: center;
	width: 130rem;
}
.home .content h1
{
	color: var(--black);
	font-size: 20rem;
}

.home .content h3
{
	color: var(--black);
	font-size: 3rem;
}

.home .content h3 span
{
	color: var(--green);
}

.home .content p
{
	color: var(--light-color);
	font-size: 1.7rem;
	padding: 1rem 0;
	line-height: 1.8;
}

/* Features */

.features .box-container
{
	border: 0px solid;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 1.5rem;
}

.features .box-container .box
{
	border: 0px solid red;
	padding: 3rem 2rem;
	background: #fff;
	outline: var(--outline)
	outline-offset: -1rem;
	text-align: center;
	box-shadow: var(--box-shadow);
}

.features .box-container .box:hover
{
	box-shadow: 1px 1px 10px 4px var(--green);
}

.features .box-container .box img
{
	margin: 1rem 0;
	height: 15rem;
}

.features .box-container .box h3
{
	font-size: 2.5rem;
	line-height: 1.8;
	color: var(--blck);
}

.features .box-container .box p
{
	font-size: 1.5rem;
	line-height: 1.8;
	color: var(--light-color);
	padding: 1rem 0;
}

/* Features */


/* Products Section */

.products .product-slider
{
	border: 0px solid;
	padding: 1rem;
}

.products .product-slider:first-child
{
	margin-bottom: 2rem;
}

.products .product-slider .box
{
	border: 0px solid rgba(255, 0, 0, 0.726);
	padding: 3rem 2rem;
	background: #fff;
	border-radius: .5rem;
	outline: var(--outline)
	outline-offset: -1rem;
	text-align: center;
	box-shadow: var(--box-shadow);
	transition: .2s linear;
}

.products .product-slider .box:hover
{
	box-shadow: 1px 1px 10px 4px var(--green);
}

.products .product-slider .box img
{
	height: 20rem;
}

.products .product-slider .box .price
{
	font-size: 1rem;
	color: var(--light-color);
	padding: .5rem 0;
}

.products .product-slider .box .stars i
{
	font-size: 1.7rem;
	color: orange;
	padding: .5rem 0;
}

.products .product-slider .box h1
{
	font-size: 2.5rem;
	color: var(--black);
}

/* Products Section */

/* Categories Section */

.categories .h2
{
	border: 0px solid;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
	gap: 1.5rem;
}


/* Container for the message */
.message-container {
	align-self: center;
    display: flexbox;
margin-left: 10rem;
    align-items: center;
    height: max-content; /* Full viewport height */
	width: max-content;
    background-color: #f4f4f4; /* Light background color */
	align-content: center;
	position: relative;
}

/* Styling the principal message */
.principal-message {
    padding: 20px;
    max-width: 100%; /* Max width for readability */
	
	align-self: center;
    text-align: center;
    border: 2px solid #110d3a; /* Border color */
    border-radius: 10px; /* Rounded corners */
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
	display: flex;
	}

/* Styling the paragraph */
.principal-message p {
    color: #333; /* Darker text color for the paragraph */
    font-size: 1.6em; /* Slightly larger font size for readability */
	position: relative;
	display: flex;
}

/* Categories Section */


/* Review Section */
.review .review-slider
{
	border: 0px solid;
	padding: 1rem;
}

.review .review-slider .box
{
	border: 0px solid rgba(255, 0, 0, 0.726);
	padding:3rem 0;
	background: #fff;
	border-radius: .5rem;
	outline-offset: -1rem;
	text-align: center;
	box-shadow: var(--box-shadow);
	transition: .2s linear;
}

.review .review-slider .box:hover
{
    	box-shadow: 1px 1px 10px 4px var(--green);
}

.review .review-slider .box img
{
	height: 10rem;
	width: 10rem;
	border-radius: 50%;
}

.review .review-slider .box p
{
	padding: 1rem 0;
	line-height: 1.8;
	color: var(--light-color);
	font-size: 1.5rem;
}

.review .review-slider .box h3
{
	padding-bottom: : .5rem ;
	color: black;
	font-size: 2.2rem;
}

.review .review-slider .box .stars i
{
	color: orange;
	font-size: 1.7rem;
}

/* Review Section */


/* Footer Section */
.footer {
	background-color: #110d3a;
	color: white;
	text-align: center;
	padding: 40px;
	margin-top: 30px;
	font-size:large;
}
/* Footer Section */


   /*    Media Query    */
   @media (max-width: 991px)
   {
      html{
    	font-size: 55%;
      }

      .header{
        padding: 2rem;
      }

      section{
        padding: 2rem 9%;
      }
   }

  @media (max-width: 768px)
   {
   	  #menu-btn
      {
      	display: inline-block;
      }
       
      .header .search-form
      {
      	width: 90%;
      }

      .header .navbar{
      	position: absolute;
      	top: 110%;
      	width: 30rem;
      	right: -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%;
    }

     .heading
     {
     	font-size: 2.5rem;
     }

     .footer 
     {
     	text-align: center;
     	font-size: 2rem;
     }

   }
  
/* Dropdown Container */
.dropdown {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Dropdown Button */
.dropdown button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
}

/* Dropdown Content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  max-height: calc(100vh - 50px); /* Full screen height minus some padding */
  overflow-y: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  box-sizing: border-box;
}

/* Show the dropdown content when the show class is added */
.dropdown-content.show {
  display: block;
}

/* Dropdown Links */
.dropdown-content a {
  color: rgb(255, 255, 255);  /* Your color preserved */
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  word-wrap: break-word;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Responsive for Mobile */
@media (max-width: 600px) {
  .dropdown {
    width: 100%;
  }

  .dropdown-content {
    width: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 50px);
  }
}


/* For flipped dropdown */
.dropdown-content.upward {
  bottom: 100%;
  top: auto;
}
   .h2 {
margin-left: 30px;
   }