/* 1.google fonts */



/* variables */

:root {


  /* colors */

  --primary: #AB024B;
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --texthead: linear-gradient(to right, #BA023C 0%, #000000 100%);
  --text-dark: #5F5F5F;
  --text-light: #ffffff;
  --gradient: linear-gradient(to right, #51078A 0%, #BA023C 100%);

  /* typography  */

  --ff-poppins: "Poppins", sans-serif;

  /* font-size */
  --h1: 40px;
  --h2: 30px;
  --p: 16px;
  --h6: 18px;

  /*  box-shadow */

  --shadow-2: 0 4px 10px 5px rgba(100, 5, 153, 0.05);

}

/* button  */

.btn-gradient {
  background: var(--gradient);
  color: #fff;
  cursor: pointer;
  border: none;
  padding: 10px 10px;
  border-radius: 5px;
  text-decoration: none;
  font-size: var(--p);
  font-family: var(--ff-poppins);
}


/* Navigation menu */

nav.navbar {
  padding-left: 150px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;

}

nav.navbar .navbar-nav .nav-item .nav-link {
  color: #5F5F5F;
  font-size: var(--p);
  font-weight: 600;
  padding-left: 10px;
  padding-right: 20px;
}


nav.navbar .navbar-nav .nav-item .nav-btn {
  margin-top: 20px;
}

.head-h1 {



  font-weight: 650;
  background: linear-gradient(to right, #BA023C, #000000);
  /* Define your gradient colors */
  -webkit-background-clip: text;
  /* For Safari */
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* For Safari */
  text-fill-color: transparent;
  background-size: 100% 300%;
}


.btn2 {
  background: transparent;
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
  padding: 10px 10px;
  border-radius: 5px;
  text-decoration: none;
  font-size: var(--p);
  font-family: var(--ff-poppins);
}

.icon-row {

  display: flex;
  gap: 30px;
}

/* blogs */

.blogbtn {
  background: #FEB766;
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
  padding: 2px 8px;
  border-radius: 5px;
  text-decoration: none;
  font-size: var(--p);
  font-family: var(--ff-poppins);
}

.blog-container {
  display: flex;
  margin-top: 50px;
}

/* contact */
.Contact-page-form {
  margin: 10px auto;
  /* Adjust margin to center the form horizontally */
  max-width: 500px;
  height: 500px;

}

.Contact-page-form input[type="text"],
.Contact-page-form input[type="email"],
.Contact-page-form input[type="tel"],
.Contact-page-form input[type="submit"] {
  margin: 5px 0;
  /* Reduce vertical margin between form elements */
  padding: 15px;
  /* Increase padding for better appearance */
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  width: 100%;
  /* Make form inputs full-width */
}

.contact-page-form input[type="submit"] {
  background-color: var(--gradient);
  /* Apply your gradient color */
  color: #fff;
  cursor: pointer;
}

.submit-button {
  margin-top: 20px;
  /* Adjust margin for submit button */
}

.contact-container {

  display: flex;

  padding: 30px;

}

.contact-page-container {

  align-items: center;
  justify-content: center;
}

.contact-address {
  display: flex;
  gap: 30px;
  flex-direction: column;
}

.contact-address h1 {
  font-size: var(--h1);
  font-family: var(--ff-poppins);
}

.contact-page-container h4 {
  color: #AB024B;
  font-size: var(--h1);
  font-family: var(--ff-poppins);
  margin-left: 280px;

  font-weight: 650;
  background: linear-gradient(to right, #BA023C, #000000);
  /* Define your gradient colors */
  -webkit-background-clip: text;
  /* For Safari */
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* For Safari */
  text-fill-color: transparent;
  background-size: 100% 300%;
}


.contact-head {
  display: flex;
  margin-top: 50px;
  gap: 30px;
  flex-direction: column;
}

.contact-head h5 {
  color: #AB024B;
  font-weight: 400;
}

.contact-head h3 {

  color: #AB024B;
  font-size: 30px;
  font-family: var(--ff-poppins);
  font-weight: 450;
  background: linear-gradient(to right, #BA023C, #000000);
  /* Define your gradient colors */
  -webkit-background-clip: text;
  /* For Safari */
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* For Safari */
  text-fill-color: transparent;
  background-size: 100% 300%;
}

.contact-head p {
  font-weight: 450;
}



.product-img {
  display: flex;
  margin-top: 150px;
  gap: 30px;
  flex-direction: column;
}

.prod-list li {

  gap: 10px;
}

.prod-list {

  display: flex;
  flex-wrap: wrap;
  gap: 10px 80px;
  flex-direction: row;
  text-decoration: none;
  list-style: none;
}