* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efefef;
}

.navbar {
  z-index: 9;
}

.hero {
  height: 100vh;
  background: url("/PROJECTS/PROJECT-1/img/hero-img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #00000099;
  background-blend-mode: color;
  background-position: center;
}

.nav-link {
  opacity: 0.7;
}

.nav-link:hover {
  opacity: 1;
}

.hero-text {
  font-size: 90px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1;
}

.button {
  width: 150px;
  height: 50px;
  border: 1px solid rgba(116, 58, 213, 1);
  background: transparent;
  font-size: 12px;
  letter-spacing: 3px;
}
.button a {
  text-decoration: none;
}

.button:hover {
  background: linear-gradient(
    to right,
    rgb(116, 58, 213) 0%,
    rgb(213, 58, 157) 100%
  );
  border: none;
  color: #fff;
}

.col-3 {
  transition: 0.5s;
}

.col-3:hover {
  background: linear-gradient(
    to right,
    rgb(116, 58, 213) 0%,
    rgb(213, 58, 157) 100%
  );
  color: #fff;
  transform: scale(1.02);
}

.icon {
  font-size: 40px;
}

.box-white {
  margin-bottom: -50px;
}

.image {
  width: 630px;
  height: 830px;
  margin-top: -100px;
}

.pricing {
  width: 330px;
  height: 450px;
  background-color: rgba(116, 58, 213, 1);
}

.pricing-btn {
  border: 2px solid #fff;
  background-color: rgba(116, 58, 213, 1);
  color: #fff;
  height: 40px;
  width: 120px;
}

.pricing-btn:hover {
  background-color: #fff;
  color: rgba(116, 58, 213, 1);
  border: none;
}

.bg-img {
  height: 100vh;
  background: url("/PROJECTS/PROJECT-1/img/bg-img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #00000099;
  background-blend-mode: color;
  background-position: center;
}

.features {
  width: 420px;
  height: 180px;
  box-sizing: border-box;
}

.features:hover {
  background: linear-gradient(
    to right,
    rgb(116, 58, 213) 0%,
    rgb(213, 58, 157) 100%
  );
}

.input {
  width: 400px;
  border: none;
  outline: none;
  border-bottom: 1px solid#000;
  background-color: #efefef;
}

.Subscribe-btn {
  width: 150px;
  height: 50px;
  background-color: #000;
  color: #fff;
}

.Subscribe-btn:hover {
  background-color: #efefef;
  border: 2px solid #000;
  color: #000;
}

.scocial {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}