h1,p {text-align: center; margin-bottom: 3%;   }


a#insta {
    font-weight: bold;
    color: var(--prime-color);
    transition: color 0.3s ease; /* Adding smooth transition */
  }

  /* Adding hover effect */
  a#insta:hover {
    color: var(--hover-intensity);
  }

.contact{
max-width: 600px;
margin: 0 auto;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact label {
display: block;
margin-bottom: 3%;
font-weight: bold;
color: #333333;
}

.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"],
.contact select,
.contact textarea {
width: 100%;
padding: 12px;
border: 1px solid #cccccc;
outline: none;
border-radius: 6px;
margin-bottom: 2%;
}

.contact input[type="text"]:focus,
.contact input[type="email"]:focus,
.contact input[type="tel"]:focus,
.contact select:focus,
.contact textarea:focus {
  border: 1px solid var(--hover-intensity); /* Set the desired border color for focus */
}

.contact select {
appearance: none;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
}

.contact textarea {
resize: vertical;
}

.contact button[type="submit"] {
display: block;
align-items: end;
margin-top: 30px;
padding: 15px 20px;
font-size: 16px;
color: #ffffff;
background-color: var(--prime-color);
border: none;
border-radius: 6px;
cursor: pointer;
}

.contact button[type="submit"]:hover {
  background-color: var(--hover-intensity);
}